|
JavaScript - Sliding Chart
Hi,
I was wondering if someone could help me out by providing me with the code which allows the chart to slide on (click on Report a Link , right next to the search box): http://www.watchseries-online.com/20...x9-improv.html I need to imporove the way this functions on my site. Here is how the report a link functions on my site: 1. go to http://tehcake.com/video/Simpsons/6x9 Look right below the video and right above the chatbox " Report Broken Episode/ Problem " if you click on the link, it takes you to another pages where the form is located. I would like to change it so that when a user clicks on " Report Broken Episode/ Problem ", then it simply relveals a sliding down chart that operates like the one found at http://www.watchseries-online.com/20...x9-improv.html (where it says : [!] REPORT A LINK in red text, to the left of the searchbox click on that, then click submit. It is not only better looking but also submits without even leaving the page) Similar TutorialsCan anyone help me get a start to make a tournament chart that assighs a value to each player and depending on that value it beats a other player.
Hi, I would like to use the following chart in my webpage http://people.iola.dk/olau/flot/examples/visitors.html the data being used in the chart example above looks like this: [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], ... I guess that the long number is the date?! The data I have is: a date that is coming from my database which was added using the date(); object and a numerical figure such as 21.365 or 30.432 or 36.856 here is my code below currently in a list format (HTML): Code: <script type="text/javascript" charset="utf-8">
var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() {
var dbSize = 10 * 1024 * 1024; // 10MB
html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
}
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("ALTER TABLE bmical ADD bmires INTEGER");
tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 TEXT, weight1 TEXT, bmires TEXT, added_on DATETIME)", []);
});
}
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var weight1 = document.getElementById("weight1").value;
var height2 = todoText / 100
var BMI = weight1 / (height2 * height2)
var BMI = BMI;
var bmires = BMI.toFixed(3);
var addedOn = new Date();
tx.executeSql("INSERT INTO bmical(height1, weight1, bmires, added_on) VALUES (?,?,?,?)",
[todoText, weight1, bmires, addedOn],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM bmical ORDER BY added_on DESC", [], renderFunc,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM bmical WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>On: " + row.added_on + " Height: " + row.height1 + " Weight: " + row.weight1 + " BMI: " + row.bmires + "<a class='delete' href='javascript:void(0);' onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a></li>";
}
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
function addTodo() {
var height1 = document.getElementById("height1");
html5rocks.webdb.addTodo(height1.value);
height1.value = "";
}
</script>
the 2 variables I'd like to use a bmires, addedOn is there a ways in javascript to create graphs chart? i can't seem to find a code on the internet
problems with google line chart. Hi there. I use this line chart and I notice that the more data it reads, the more lines disappears. https://developers.google.com/chart/...lery/linechart We take for example this data ['15 .30 ', 9038], ['', 9.04]; ['', 9.02]; ['', 9.03]; ['', 9.0268], ['', 9.04]; ['', 9.0393], ['', 9:06] ['16 .00 ', 9058], ['', 9.09]; ['', 9075]; ['', 9:08] ['', 9052]; ['', 9.07]; ['', 9:06] ['', 9.0704], ['17 .30 ', 9.07]; Then the row ['16 .00 ', 9058], disappear because it is so much data, and take the most important thing to be able to see a good line chart. The Line chart work well, but I would like to know how to change the code so it becomes mandatory that the program must read the rows that have a number as the first element( example ['element' element]). If the first element does not contain any such number, the program may determine whether to print it or not. To make it a little easier stated, I can say that the row who have the first element, who contains a number, so most the code read it to the screen. Thanks. I run a christian ministry that mentors kids. One aspect of this is tracking their chores. All of the online sticker charts we have used over the yrs have vanished. Currently we are using one that only puts checkmarks in the squares and the kids are bored with it. So I want to create a clickable table that puts an icon in the cells on click. I know a little html and ive designed websites with a visual editor. If someone could please point me in the right direction where I would even begin to learn how to create the script I described it would be greatly appreciated. In case it is not clear what I would like to create this video shows the most recent site we used.( hopefully including the link is not advertising since the site shown in the video is gone. If it is I apologize) It is no longer up. Hence my wanting to create a similar script that can be added to our church's website. thanks again for any guidance. a bit of an aside please don't just suggest we use an app. I know there are apps out that do what I described and more but, an online version is preferable because the kids don't live with their mentors. Also some of them only have computer access at the library. so it is unreasonable to expect them to have a smart phone or tablet. Reply With Quote 01-10-2015, 10:42 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Well, just to start with, you are going to need "baqkend" code. That is, you will need a database where all the information can be recorded and server-side code to maintain and access that information. The most likely candidate for this would be a MySQL database and PHP code to interface to it and to produce the web pages. You really have no choice but to do it this way: If the child used the exact same computer *AND* had an account on that computer, then you could do it by saving the information on that computer. But with a library-based computer, (a) accounts are anonymous, not assigned [typically] and (b) the child may not be able to use the exact same computer on subsequent days. By doing the bulk of the work on a server, you ensure that any computer (or pad or phone) can access the same information and present the same interface (or perhaps a modified interface for smaller screens). This is *NOT* a trivial task. Never mind the pretty graphics: Just the code behind the scenes is enough that nobody is going to do it in a few days (or at least is not going to get it right in a few days). You have to locate a host ($$ per month/year), get a domain name ($$ per year), create a database, create the tables in that database, write the PHP code to modify the database, write the PHP code to access the database, write the PHP code to create the HTML pages, create the icons and other graphics for the pages, and so on. Hey all i am in need of some help trying to figure out how to pass a string into an array field for a chart. The chart i am using is this [http://www.highcharts.com/] Here is the chart code: Code: function drawChart(theDATA)
{
var chart = new Highcharts.Chart({
chart: {renderTo: 'container',defaultSeriesType: 'column'},
title: {text: 'March 2010 Confirmed User Visit\'s'},
xAxis: {categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']},
yAxis: {min: 0,title: {text: 'User Visit\'s'}},
legend: {layout: 'vertical',backgroundColor: '#FFFFFF',style: {left: '100px',top: '70px',bottom: 'auto'}},
tooltip: {formatter: function() {return this.y;}},
plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},
series: [{name: 'Confirmed Users Visit\'s',
data: theDATA.split(',')
}]
});
}
With the code above, you would think that theDATA would work but it does not display the data within it. Say that theDATA is '2,5,4,7,8,9'. If i had this: Code: data: [2,5,4,7,8,9] Then it would work just fine. But if i use those same numbers... Code: theData = "2,5,4,7,8,9"
data: theDATA.split(',')
It does nothing on the chart... So what am i doing wrong???? David Hi everyone, I am new to web development. The company I am working for would like to develop a data analysis web interface. This interface would take information from a mySQL database from certain queries and then save the data into an array. After this the data would be exported to Microsoft Excel where a Chart would be created and then uploaded to the web interface. So far I have been able to store the mySQL data into an array but I have been having trouble trying to determine if you can in fact use javascript to tell Excel to create the chart. Any help would be greatly appreciated. I have a slider that slides the content from the top to bottom when a link/button is clicked. I want it to slide out from the right side of the button and move left to right. Is this possible by just adjusting the code I already have? Thanks. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jQuery Accordion Style DIV Menu</title> <link href="format.css" rel="stylesheet" type="text/css" /> <link href="text.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript" src="javascript.js"> </script> </head> <body> <div id="wrapper"> <div class="accordionButton">Button 1 Content</div> <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div> <div class="accordionButton">Button 2 Content</div> <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div> <div class="accordionButton">Button 3 Content</div> <div class="accordionContent">Content 1<br />Short Example</div> <div class="accordionButton">Button 4 Content</div> <div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div> </div> </body> </html> javascript.js: Code: $(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/
$('.accordionContent').hide();
});
So about a couple of weeks ago I decided to start learning the basics of web development and design through the w3schools website. I found no problems learning HTML/XHTML and CSS1/2/3. I decided the best way to learn these languages was to implement something from each language into a project (a website, which is currently stored locally on my laptop) The project is a site dedicated to favourite images of my family. In it is a main image viewer, followed by a nav bar underneath displaying thumbnails of a few images. I implemented a small JS script so when I click a thumbnail, the corresponding image is displayed within the main image viewer. I then moved onto jQuery in my development knowledge quest, and decided the next thing I wanted to do was add more images to the nav bar and be able to scroll (with two buttons) across the nav bar. This is where I've hit an end stop in being able to do this with no help. So to begin with, this is my HTML for the thumbnail navbar: Code: <div class="scrollWrapper">
<div class="controlsPrev"></div>
<div class="controlsNext"></div>
<div class="scrollableArea">
<p><input type="image" src="images/home/54.jpg" alt="Image" onclick="displayImage('images/home/54.jpg')" /></p>
<p><input type="image" src="images/home/55.jpg" alt="Image" onclick="displayImage('images/home/55.jpg')" /></p>
<p><input type="image" src="images/home/56.jpg" alt="Image" onclick="displayImage('images/home/56.jpg')" /></p>
<p><input type="image" src="images/home/57.jpg" alt="Image" onclick="displayImage('images/home/57.jpg')" /></p>
<p><input type="image" src="images/home/58.jpg" alt="Image" onclick="displayImage('images/home/58.jpg')" /></p>
<p><input type="image" src="images/home/59.jpg" alt="Image" onclick="displayImage('images/home/59.jpg')" /></p>
<p><input type="image" src="images/home/60.jpg" alt="Image" onclick="displayImage('images/home/60.jpg')" /></p>
<p><input type="image" src="images/home/61.jpg" alt="Image" onclick="displayImage('images/home/61.jpg')" /></p>
<p><input type="image" src="images/home/62.jpg" alt="Image" onclick="displayImage('images/home/62.jpg')" /></p>
<p><input type="image" src="images/home/63.jpg" alt="Image" onclick="displayImage('images/home/63.jpg')" /></p>
</div>
</div>
</div>
CSS Styling (external sheet): Code: div.scrollWrapper
{
background-color:#252525;
width:960px;
height:115px;
display:block;
overflow:hidden;
}
div.scrollableArea
{
height:115px;
}
div.scrollableArea p
{
margin:0;
}
div.controlsPrev
{
height:115px;
width:65px;
background-color:#FFFFFF;
position:absolute;
}
div.controlsNext
{
height:115px;
width:65px;
background-color:#FFFFFF;
position:absolute;
right:195px;
}
My first problem is that now I have added further <p> elements to the navbar, they "wrap" to the next line, causing scrollableArea to be double the height. The second problem is implementing some code to bring the navbar to life. Since it's jQuery (and I've linked the googleapis library in my html document) I thought the custom animation methods would be the best way to create this effect. Though I've thought of a few obstacles in my way, namely: 1. How to hide the right most or left most (depending on which control class eg. Prev or Next) <p> element and show the opposite <p> element at the same time, and also shift or slide all other <p> elements in view across (again depending on which control class or direction control I have clicked). 2. I want flexible code, that allows for (in the future) more <p> elements. All my code has been based around flexibility and the fact that it will be constantly changing at a fast rate. Therefore I think a function within my script to count the number of <p> elements within the scrollableArea would resolve this issue somewhat. Any help or advice given on the subject would be greatly appreciated, if there would be another method to get the desired effect then please share. I've stayed away from plug-ins apart from the generic jQuery library provided by google, I want to be able to say I have created everything by myself and not "cheated" if you will. It doesn't take a genius to implement plug-ins into code, I see it on various websites and have seen developers use them before and claim them as their own. I took a look at a few tutorials on the subject, but I haven't found anything specific to my cause. Cheers dudes, Johnny. I virtually know no javascript, but have been trying to create some sliding menus. 4 Menus along the bottom of the screen that on mouse over, a sub menu slides up from them. I managed to get them to work to slide up, but then when I put the code in to slide back down again it started spazzing out! Can anyone help at all? Here's my javascript code. Code: <script type="text/javascript">
var curVisible;
var oldObject;
var pusher;
var pushBack;
var inMotion = false;
function reveal(obj) {
if(curVisible != null) {
oldObject = curVisible;
}
if(!inMotion) {
curVisible = obj;
pusher = -100;
pushBack = 40;
document.getElementById(obj).style.visibility = "visible";
document.getElementById(obj).style.bottom = pusher+"px";
animateOut();
animateIn();
}
}
function hide() {
animateIn();
}
function animateIn() {
if (pushBack > -100) {
inMotion = true;
pushBack -=4;
document.getElementById(oldObject).style.bottom = pushBack+"px";
setTimeout(animateIn, 20);
} else {
document.getElementById(oldObject).style.visibility = "hidden";
inMotion = false;
}
}
function animateOut() {
if(pusher < 40) {
inMotion = true;
pusher += 4;
document.getElementById(curVisible).style.bottom = pusher+"px";
setTimeout(animateOut, 20);
} else {
inMotion = false;
}
}
</script>
Thanks very much. Have tried loads, but just can't seem to get it to work. It's a lot more complicated than I first thought. Dave Hi all, I am new to this forum and still fairly new to website design and coding. My girlfriend is a fashion designer and I said I would build her a website (one of those things I said whilst watching the football). I am trying to find if a script exists to have an image slide-show which moves to the right when the cursor moves to the right and so on for the left. We have managed to find someone else who has done exactly what she wants but it's in flash and I have no experience at all in flash. So I was wondering if anyone knows of a script which does the exact same thing? Below is the link to the site where they have managed to do what we are looking for in Flash: http://www.matthewwilliamson.com/collections.php Any help would be greatly appreciated. Cheers guys I'm trying to make this menu go up and down when the arrows are clicked. Right now, it shows all of them and I can't figure out how to make it so that it only shows the first 9 and will show the rest in the menu when it's clicked. I really don't know where to start. I found some scripts but they turned out really funky. Even if it's something super simple is cool, just where to begin?? Here is the menu: Code: <div class="arrow_holder"><span onclick="document.getElementById('down').display = 'none'; document.getElementById('up').display = 'block';" ><img src="images/arrow-up.png" alt="" border="0" /></span></div>
//video1
<div class="portfolio_details" onclick="change_video(1);">
<div class="work_thumb"><img src="images/12.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>12 FL OZ</strong><br />Narrative / Television</a></div>
</div>
//video2
<div class="portfolio_details" onclick="change_video(2);">
<div class="work_thumb"><img src="images/catch.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>THE CATCH: COSTA RICA</strong><br />Narrative / Television</a></div>
</div>
//video3
<div class="portfolio_details" onclick="change_video(3);">
<div class="work_thumb"><img src="images/cole.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>COLE PETTICOAT P.I.</strong><br />Narrative / Television</a></div>
</div>
//video4
<div class="portfolio_details" onclick="change_video(4);">
<div class="work_thumb"><img src="images/mayan_thumb.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>MAYAN BLUE</strong><br />Documentary</a></div>
</div>
//video5
<div class="portfolio_details" onclick="change_video(5);">
<div class="work_thumb"><img src="images/marine.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>MARINE INVESTIGATORS</strong><br />Documentary</a></div>
</div>
//video6
<div class="portfolio_details" onclick="change_video(6);">
<div class="work_thumb"><img src="images/police.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>DISH POLICE</strong><br />Commercial</a></div>
</div>
//video7
<div class="portfolio_details" onclick="change_video(7);">
<div class="work_thumb"><img src="images/septic.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>SUPER SEPTIC MIKE ROBE</strong><br />Commercial</a></div>
</div>
//video8
<div class="portfolio_details" onclick="change_video(8);">
<div class="work_thumb"><img src="images/adultswim.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>ADULT SWIM - HAIKU</strong><br />Commercial</a></div>
</div>
//video9
<div class="portfolio_details" onclick="change_video(9);">
<div class="work_thumb"><img src="images/miller.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>MILLER LITE / FALCONS</strong><br />Commercial</a></div>
</div>
//video10
<div class="portfolio_details" onclick="change_video(10);">
<div class="work_thumb"><img src="images/trulite.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>TRUCLEAR HD PLUS</strong><br />Commercial</a></div>
</div>
//video11
<div class="portfolio_details" onclick="change_video(11);">
<div class="work_thumb"><img src="images/tara.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>TARA JEWELRY</strong><br />Commercial</a></div>
</div>
//video12
<div class="portfolio_details" onclick="change_video(12);">
<div class="work_thumb"><img src="images/boomerang.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>BOOMERANG VAMPIRES</strong><br />Commercial</a></div>
</div>
video13
<div class="portfolio_details" onclick="change_video(13);">
<div class="work_thumb"><img src="images/gapower.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>GA POWER FALCONS</strong><br />Commercial</a></div>
</div>
<div class="arrow_holder"><span onclick="document.getElementById('up').display = 'none'; document.getElementById('down').display = 'block';" ><img src="images/arrow-down.png" alt="" border="0" /></span></div>
</div>
Hello I am fairly new to Javascript and found this code online but can't seem to get it to work right. here is the code I am using it is suppose to apply a style attribute the the id "toplink" but I can't seem to get it to work right. Code: $(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$("#toplink").animate({top:offset},{duration:500,queue:false});
});
});
Thanks in advance Hi, I'm relatively new to javascript, I am trying to create a sliding menu, everything is working fine other than the hyperlinks are not working, they open if you right click and select open link, but not with a normal click. Any help will be very appreciated, you can acsess the javascript he http://justifi.co.uk/menu.js the css he http://justifi.co.uk/menu.css and the html he http://justifi.co.uk/menu.html Thank you in advance; James I am really new to coding and am trying to include a flowchart that I have created on my site. There is a series of 5 questions with 2 possible answers for each question. Can anyone help me with some coding that would let me show only the first question and based on how they answer that, the flow chart would open up to the second question and once they answer the second question, it opens up to the third question and so on?
I had a plugin created and the Jquery is not working correctly. Can anyone help me sort this out? I have exhausted all other options. Thanks. You can see this 'calendar' plugin here (near bottom of page): http://billboardfamily.com/blogs/ ISSUES: 1) The calendar sliding effect needs to be left/right as opposed to from the bottom. 2) 2 months should always be shown at all times 3) After you go through all months...it freezes completely 4) Is there anyone who can improve the navigation buttons? They are pretty weak at the moment. Here is the code: Code: <?php
add_action('widgets_init', 'pc_widgets_init');
define('PCAL_CAT', 6);
function pc_widgets_init() {
register_widget('pc_widget');
}
function get_post_calendar_html(){
global $wp_version;
?>
<style type="text/css">
.wp-calendar{ width:160px;}
.wp-calendar div.calendar {width:100%;}
.wp-calendar caption {
color:#48B05A;
font-weight:bold;
margin-bottom:6px;
padding:0;
text-transform:uppercase;
font-size:.9em;
text-align:left;
}
.wp-calendar tr {margin-bottom:0;}
.wp-calendar td, .wp-calendar th.days {width:26px;height:26px;padding:0;margin:0 1px 1px 0;border:none;}
.wp-calendar td.pad, .wp-calendar th.days {background-color:#eeeee7;}
.wp-calendar th.days {text-align:center;padding-top:6px;height:20px;}
table.mini {margin-right:-1px;}
.wp-calendar td.view-item {margin:0; background-color:#d9d9cd; text-align:center;width:25px;height:20px; padding:6px;}
.wp-calendar td.view-item a {text-align:center;padding-top:6px;color:#333;font-weight:bold;}
.wp-calendar td.today {background-color:#48b05a;}
.wp-calendar td.today a {color:#fff;}
</style>
<script type="text/javascript">
function pcal_prev(){
if(jQuery(".wp-calendar:visible").length > 1){
jQuery(".wp-calendar:visible:first").slideUp('slow');
jQuery(".wp-calendar:visible:last").next('.wp-calendar:hidden:first').show('slow');
}
}
function pcal_next(){
if(jQuery(".wp-calendar:visible:first").prev('.wp-calendar:hidden').length){
jQuery(".wp-calendar:visible:last").hide('slow');
jQuery(".wp-calendar:visible:first").prev('.wp-calendar:hidden:last').show('slow');
}
}
</script>
<span class="calendar_nav_bar"><a onclick="pcal_next()"><—</a> <span><?php echo $browse; ?></span>
<a onclick="pcal_prev()">—></a>
</span>
<?php
pcal_get_posts();
}
function pcal_get_posts(){
global $wpdb, $wp_locale;
$thisyear = gmdate('Y', current_time('timestamp'));
$thismonth = gmdate('m', current_time('timestamp'));
$lastmonth = $thismonth-1;
$lastyear = $thisyear;
if($thismonth == -1){
$lastmonth = 12;
$lastyear -=1;
}
get_post_calendar($thismonth,$thisyear);
// Get months this year and next with at least one post
$future = $wpdb->get_results("SELECT
DISTINCT MONTH(post_date) AS month, YEAR(post_date) AS year
FROM $wpdb->posts
WHERE post_date <='$lastyear-".($lastmonth+1)."-01'
AND post_type = 'post' AND post_status = 'publish'
ORDER BY post_date DESC");
$x= 0; //Hide counter, after the first one, it will disappear
foreach($future as $now){
get_post_calendar($now->month,$now->year,$x);
$x++;
}
}
// Calendar Output...
function get_post_calendar( $thismonth ='', $thisyear='', $hide=0) {
global $wpdb, $timedifference, $wp_locale;
$unixmonth = mktime(0, 0 , 0, $thismonth, 1, $thisyear);
// week_begins = 0 stands for Sunday
$week_begins = intval(get_option('start_of_week'));
$add_hours = intval(get_option('gmt_offset'));
$add_minutes = intval(60 * (get_option('gmt_offset') - $add_hours));
if($hide)
$style = "display:none;";
echo '<table class="wp-calendar" style="'.$style.'">
<caption>' . $wp_locale->get_month($thismonth) . ' ' . $thisyear . '</caption>
<thead>
<tr>';
$myweek = array();
for ( $wdcount=0; $wdcount<=6; $wdcount++ ) {
$myweek[] = $wp_locale->get_weekday(($wdcount+$week_begins)%7);
}
foreach ( $myweek as $wd ) {
$day_name = (true == $initial) ? $wp_locale->get_weekday_initial($wd) : $wp_locale->get_weekday_abbrev($wd);
echo "\n\t\t<th abbr=\"$wd\" scope=\"col\" class='days' title=\"$wd\">$day_name</th>";
}
echo '
</tr>
</thead>
<tbody>
<tr>';
// Get days with posts
$dayswithposts = $wpdb->get_results("SELECT DISTINCT DAYOFMONTH(post_date)
FROM $wpdb->posts
LEFT JOIN $wpdb->term_relationships AS trel ON ($wpdb->posts.ID = trel.object_id) LEFT JOIN $wpdb->term_taxonomy AS ttax ON ( trel.term_taxonomy_id = ttax.term_taxonomy_id) LEFT JOIN $wpdb->terms AS tter ON (ttax.term_id = tter.term_id) WHERE MONTH(post_date) = '$thismonth'
AND YEAR(post_date) = '$thisyear'
AND post_type = 'post' AND post_status = 'publish'"
."AND post_type = 'post' AND post_status = 'publish' AND ( ttax.taxonomy = 'category' AND $wpdb->posts.ID = trel.object_id AND trel.term_taxonomy_id = ttax.term_taxonomy_id AND ttax.term_id = tter.term_id AND tter.term_id = '".PCAL_CAT."')", ARRAY_N);
if ( $dayswithposts ) {
foreach ( $dayswithposts as $daywith ) {
$daywithpost[] = $daywith[0];
}
} else {
$daywithpost = array();
}
if ( strstr($_SERVER['HTTP_USER_AGENT'], 'MSIE') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'camino') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari') )
$ak_title_separator = "\n";
else
$ak_title_separator = ', ';
$ak_titles_for_day = array();
//sets the Density Thermometer
$ak_posts_for_day = array();
$ak_post_titles = $wpdb->get_results("SELECT ID, post_title, DAYOFMONTH(post_date) as dom "
."FROM $wpdb->posts
LEFT JOIN $wpdb->term_relationships AS trel ON ($wpdb->posts.ID = trel.object_id) LEFT JOIN $wpdb->term_taxonomy AS ttax ON ( trel.term_taxonomy_id = ttax.term_taxonomy_id) LEFT JOIN $wpdb->terms AS tter ON (ttax.term_id = tter.term_id) "
."WHERE YEAR(post_date) = '$thisyear' "
."AND MONTH(post_date) = '$thismonth' "
."AND post_type = 'post' AND post_status = 'publish' AND ( ttax.taxonomy = 'category' AND $wpdb->posts.ID = trel.object_id AND trel.term_taxonomy_id = ttax.term_taxonomy_id AND ttax.term_id = tter.term_id AND tter.term_id = '".PCAL_CAT."')"
);
// print_r($wpdb);
if ( $ak_post_titles ) {
foreach ( $ak_post_titles as $ak_post_title ) {
if ( empty($ak_titles_for_day['day_'.$ak_post_title->dom]) )
$ak_titles_for_day['day_'.$ak_post_title->dom]['title'] = '';
if ( empty($ak_titles_for_day["$ak_post_title->dom"]) ){ // first one
$ak_titles_for_day["$ak_post_title->dom"]['title'] = str_replace('"', '"', wptexturize($ak_post_title->post_title));
$ak_titles_for_day["$ak_post_title->dom"]['id'] =$ak_post_title->ID;
}else{
$ak_titles_for_day["$ak_post_title->dom"]['title'] .= $ak_title_separator . str_replace('"', '"', wptexturize($ak_post_title->post_title));
}
$ak_posts_for_day["$ak_post_title->dom"] +=1;
}
}
// See how much we should pad in the beginning
$pad = calendar_week_mod(date('w', $unixmonth)-$week_begins);
if ( 0 != $pad ) { echo "\n\t\t".'<td colspan="'.$pad.'" class="pad"> </td>'; }
$daysinmonth = intval(date('t', $unixmonth));
for ( $day = 1; $day <= $daysinmonth; ++$day ) {
if ( isset($newrow) && $newrow )
echo "\n\t</tr>\n\t<tr>\n\t\t";
$newrow = false;
if ( $day == gmdate('j', (time() + (get_option('gmt_offset') * 3600))) && $thismonth == gmdate('m', time()+(get_option('gmt_offset') * 3600)) && $thisyear == gmdate('Y', time()+(get_option('gmt_offset') * 3600)) ){
echo '<td class="today view-item">'.'<span>'.$day.'</span>';
}elseif(in_array($day, $daywithpost)){
echo '<td class="haspost view-item">';
echo '<a href="'.get_permalink($ak_titles_for_day[$day]['id'] ).'" title="'.$ak_titles_for_day[$day]['title'].'" '.$onclick1.' >'.$day.'</a>';
}else{
echo '<td class="view-item">'.'<span>'.$day.'</span>';
}
// any posts on that day?
if ( in_array($day, $daywithpost) ) {
//Outputs the Density Thermometer along with the day...
} else {
}
echo '</td>';
if ( 6 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) )
$newrow = true;
}
$pad = 7 - calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins);
if ( $pad != 0 && $pad != 7 )
echo "\n\t\t".'<td class="pad" colspan="'.$pad.'"> </td>';
echo "\n\t</tr>\n\t</tbody>\n\t</table>";
}
/*Add Dashboard Widget via function wp_add_dashboard_widget()*/
function pc_setup_dashboard_widget() {
wp_add_dashboard_widget( 'pc_add_dashboard_widget', __( 'Posts Calendar' ), 'pc_add_dashboard_widget' );
}
function pc_add_dashboard_widget(){
pcal_getposts(0);
}
class pc_widget extends WP_Widget {
function pc_widget() {
$widget_ops = array('classname' => 'pc_widget', 'description' => __( "Show your blog's Future Posts in the sidebar.") );
echo $this->WP_Widget('pc_widget', __('Posts Calendar Sidebar'), $widget_ops);
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['browse'] = strip_tags($new_instance['browse']);
$this->flush_widget_cache();
$alloptions = wp_cache_get( 'alloptions', 'options' );
if ( isset($alloptions['pc_widget']) )
delete_option('pc_widget');
return $instance;
}
function flush_widget_cache() {
wp_cache_delete('pc_widget', 'widget');
}
function form( $instance ) {
$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
$title = isset($instance['browse']) ? esc_attr($instance['browse']) : '';
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title'); ?></label>
<input type="text" name="<?php echo $this->get_field_name('title'); ?> id="<?php echo $this->get_field_id('title'); ?>" value="<?php echo $title;?>">
<p><label for="<?php echo $this->get_field_id('browse'); ?>"><?php _e('"Browse Post" text'); ?></label>
<input type="text" name="<?php echo $this->get_field_name('browse'); ?> id="<?php echo $this->get_field_id('browse'); ?>" value="<?php echo $browse;?>">
</p>
<?php
}
function widget($args, $instance) {
global $wpdb;
$cache = wp_cache_get('pc_widget', 'widget');
if ( !is_array($cache) )
$cache = array();
if ( isset($cache[$args['widget_id']]) ) {
echo $cache[$args['widget_id']];
return;
}
ob_start();
extract($args);
$title = apply_filters('widget_title', empty($instance['title']) ? __('Scheduled Posts') : $instance['title']); $browse = empty($instance['browse']) ? __('Browse Posts') : $instance['browse'];
?>
<?php echo $before_widget; ?>
<?php echo $before_title; ?><?php if ( $title ) echo $title; ?><?php echo $after_title; ?>
<div id="pc">
<?php get_post_calendar_html();?>
</div>
<?php echo $after_widget; ?>
<?php
$cache[$args['widget_id']] = ob_get_flush();
wp_cache_add('pc_widget', $cache, 'widget');
}
}
?>
Hi all, I'm trying to create a thumbnail gallery where if the user moves the mouse over the thumbnail, a panel slides up covering half the thumbnail, showing you options for that particular thumbnail. The panel should slide back down (and disappear) when the mouse is moved off the thumbnail. I have this working he http://disarmer.freeservers.com/test/slide4.html The problem I'm having is that at the moment the Javascript references the sliding panel directly, using var slidingDiv = document.getElementById("theme_details");, but I need to reference the sliding DIV dynamically, i.e. as a function of the argument passed by the parent DIV (the thumbnail itself). Here is the HTML and Javascript: Code: <html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="slider4.css" />
<script language="javascript" type="text/javascript" src="fixOnMouseOut.js"> </script>
<script type="text/javascript" language="javascript">
//<![CDATA[
var startPosition = 0;
var stopPosition = -70;
var slideAmount = 4;
var goingUp = false;
var goingDown = false;
function slideUp(theme) {
// find class to slide
//var slidingDiv;
//for (i=0; i<theme.childNodes.length; i++){
// if (theme.childNodes[i].nodeName=="DIV") slidingDiv=theme.childNodes[i];
//}
var slidingDiv = document.getElementById("theme_details");
slidingDiv.style.display="block"; // show sliding class
if ( !goingDown && (parseInt(slidingDiv.style.top) > stopPosition) ) {
goingUp = true;
slidingDiv.style.top = parseInt(slidingDiv.style.top) + -slideAmount + "px";
slidingDiv.style.height = parseInt(slidingDiv.style.height) + slideAmount + "px";
setTimeout(slideUp, 10);
}
goingUp=false;
}
function slideDown(theme) {
// find class to slide
//var slidingDiv;
//for (i=0; i<theme.childNodes.length; i++){
// if (theme.childNodes[i].nodeName=="DIV") slidingDiv=theme.childNodes[i];
//}
var slidingDiv = document.getElementById("theme_details");
if ( !goingUp && (parseInt(slidingDiv.style.top) < startPosition) ) {
goingDown=true;
slidingDiv.style.top = parseInt(slidingDiv.style.top) + slideAmount + "px";
slidingDiv.style.height = parseInt(slidingDiv.style.height) + -slideAmount + "px";
setTimeout(slideDown, 10);
}
else {
slidingDiv.style.display="none"; // hide sliding class
goingDown=false;
}
}
//]]>
</script>
</head>
<body>
<div id="theme_frame" onmouseover="slideUp(this);" onmouseout="fixOnMouseOut(this,event,'slideDown(this)');">
<img id="crap" src="http://www.featherfolly.co.uk/photos/tn_Extraordinary_Fluffy_Cream_Feathers.jpg" alt="" />
<div id="theme_details" style="display:none; top:0px; height: 0px;">
Feather Info<br />
<a href="">Buy It</a><br />
<a href="">Try It</a>
</div>
</div>
</body>
</html>
I've tried iterating through the parent DIV's children, finding the one child that has tag="DIV", and it just becomes extremely slow and unusable. I've also tried var slidingDiv = document.getElementById('theme_frame').lastChild; but that only works in IE and not in Firefox. Any help much appreciated. Thanks in advance Sean This is a different issue to the scrollbar one I put in the xhtml section not long ago, I'm not spamming Here's my website so far: http://designprohibited.com/dp3/ If you click the "view showreel" tab at the top a div will slide out and display a test video hosted at Vimeo.com. If you do that in IE it slides out very smooth and nicely. If you do it in FireFox a white box where the video is loads instantly before the div slides out and it looks a bit crappy. Any fixes? Please can anyone help? hello I am novice when it comes to writing code and as i'm writing some code for a sliding puzzle game, i have managed to display the images. but now i need to write the functions to see if the image when clicked on is next to the blank one and then to move them if this is true. <Html> <Head> <Title> Sliding Puzzle Game</Title> <Script Language = "JavaScript"> var images = new Array(); //var initialise var id = 0; alert("starting"); window.onerror = handleError; function handleError(strMessage, strURL, intLine) //the above function catches any errors and display what and where. { document.write("<br/>The following Error occurred:"); document.write("<br/>Message: " + strMessage); document.write("<br/>Code: " + strURL); document.write("<br/>On line: " + intLine); } function Write2screen(){ var k=0; for (i=0; i< 4; i++) { for (j=0; j<4; j++) { id++; //give picture unique id after each iteration images[k] = "Images/" + k + ".jpg"; document.write(" <img src= '"+images[k]+"' id='"+id+"'/>"); k++; } document.write("<br/>"); } } function CanMoveTile() { // checks to see whether the cell at postion cellNum // is next to the black tile and returns true if and // only if this is the case } function moveTile(id) { // this function moves the tile that was clicked on (if the tile can actually be moved) } Write2screen(); </Script> </Head> <body onClick=moveTile(id)> </body> </Html> many thanks in advance |
|||||||