|
JavaScript - Modifying The Opening/closing Logic Of A Jquery Based Sliding Panel
Hi,
I am using a wordpress jquery based plugin. TheThe Sliding panels. You can see the jquery he - http://www.get-me-heard.com/wp-conte...jquery.ttsp.js The panel currently auto-opens when the page loads. Which is what I want, however I would like it so that once a user has clicked to close the panel, for it to stay closed even when navigating pages, until they decide to click open again. I would also need the cookie flushed when they leave the website so that the next time they return the panels auto open again. Essentially I just dont want the users to have to click close every time they navigate throughout the website if they don't want to see the panels. NOTE: The plugin has several panels which you can choose from. I am only using the left panel and the right panel. They are all controlled within the jquery. Thanks! Similar TutorialsHello. I've created this sliding panel where I click the Sidebar button and it slides out or in. But I would like to make it run more smoothly. I tried storing references to the elements within the MoveSidebar() as this.variables, so that they wouldn't be re-defined each time, but then FF spits out that 'this.sidebar.style' is undefined?! How can I make it run more smoothly, or get FF to recognise 'this.sidebar.style' please (once I reinstate all the this.references)? Here's the whole page and the button is also attached for ease of testing. Andy. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sidebar Panel</title>
<style type="text/css">
#sidebar {
display: inline-block;
position: fixed;
top: 200px;
right: -100px;
}
#sidebar img {
cursor: pointer;
}
#sidebar ul {
display: inline-block;
list-style-type: none;
padding: 0; margin: 0;
background: lightgrey;
margin-left: -4px;
height: 97px; /* same as the image */
}
#sidebar li {
display: inline;
}
#sidebar a {
float: left;
clear: left;
width: 90px;
text-decoration: none;
padding: 2px 5px;
}
</style>
<script type="text/javascript">
var theTimer;
function MoveSidebar() {
var sidebar = document.getElementById('sidebar');
var sideRight = parseInt(sidebar.style.right || "-100px");
var out = document.getElementById('sideImage').out;
if ( out && sideRight <= 0 ) {
sidebar.style.right = (sideRight + 2) + 'px';
}
else if ( !out && sideRight >= -100 ) {
sidebar.style.right = (sideRight - 2) + 'px';
}
else {
clearInterval(theTimer);
}
}
function InitSide() {
document.getElementById('sideImage').onclick = function () {
this.out = ( this.out ) ? false : true;
clearInterval(theTimer);
theTimer = setInterval(MoveSidebar,10);
}
}
window.onload = InitSide;
</script>
</head>
<body>
<h1>Creating a Sidebar Panel Button</h1>
<div id="sidebar">
<img src="images/sidebar.png" id="sideImage">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#further">Further Info</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
</body>
</html>
Hello, I am trying to get this sliding panel to automatically be open when the page loads. Right now it is closed and I need to click it to open. I would like for it to be automatically opened when the page first loads and click to close it. Can anyone help me with the coding? Here is the 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=utf-8" /> <title>Demo</title> <style type="text/css"> @import url(style.css); </style> <script src="jquery.js" type="text/javascript"></script> <script src="javascript.js" type="text/javascript"></script> </head><body> <center> <div class="contenta"><img src="4.jpg" /></div> <div id="header"> <img src="2.jpg" width="938" height="68" border="0" /> </div> <div id="page_container"> <div id="toppanel"> <div style="height: 0px; display: block;" id="panel"><img src="1.jpg" width="938" height="583" /></div> <div class="panel_button" style="display: block;"><a href="#">Expand</a></div> <div class="panel_button" id="hide_button" style="display: none;"><a href="#">Close</a></div> </div> <div id="content"><img src="5.jpg" /></div> </div> </center> </body></html> and javascript.js $(document).ready(function() { $("div.panel_button").click(function(){ $("div#panel").animate({ height: "400px" }) .animate({ height: "300px" }, "fast"); $("div.panel_button").toggle(); }); $("div#hide_button").click(function(){ $("div#panel").animate({ height: "0px" }, "fast"); }); }); and css: body { text-align: center; margin: 0px; background: #000; } #page_container { position: relative; margin-left: 0px; margin-right: 0px; width: 938px; } #header { margin-left: 0px; margin-right: 0px; width: 938px; background: #111; } .panel_button { margin-left: 0px; margin-right: 0px; position: relative; top: -25px; padding-top: 5px; width: 100px; height: 22px; background: url(images/panel_button.png); z-index: 20; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity: 0.70; opacity: 0.70; cursor: pointer; } .panel_button img { position: relative; top: 10px; } .panel_button a { text-decoration: none; color: #FFF; font-size: 12px; font-weight: bold; position: relative; font-family: Arial, Helvetica, sans-serif; } .panel_button a:hover { color: #999999; } #wrapper { margin-left: 0px; margin-right: 0px; width: 100%; text-align: center; } #toppanel { width: 100%; left: 0px; top: 0px; z-index: 25; text-align: center; } #panel { width: 938px; position: relative; top: 1px; height: 0px; margin-left: 0px; margin-right: 0px; z-index: 10; overflow: hidden; text-align: left; } #panel_contents { background: black; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity: 0.70; opacity: 0.70; height: 100%; width: 938px; position: relative; z-index: -1; } #content { margin-left: 0px; margin-right: 0px; width: 100%; position: relative; text-align: left; color: #545454; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } div.contenta { width: 938px; margin-left: 0px; margin-right: 0px; } Thank you. Hi there all, Trying to adapt a bit of Code, but failing wonderfully! I'm writing in Cold Fusion, but using a little java script to create the sliding effect. It's from a sliding open list function in another site, and I tried to just hack my current needs in there. Code: <script>
function DC_ShowHideMoreWebsites(id) {
if( document.getElementById( "contentsections2").style.display=="none" ) {
Effect.BlindDown( "contentsections2");
return false;
} else {
Effect.SlideUp( "contentsections2" ); return false;
}
}
</script>
is followed by Code: <p id="moreScreenshots"><a href="#" onclick="DC_ShowHideMoreWebsites"; return false;">More Website Examples</a></p> I've tested the script, div and the DB call by just calling it with Code: <p id="moreScreenshots"><a href="#" onclick="Effect.BlindDown('contentsections2'); return false;">More Website Examples</a></p>
And that works fine. I've never coded in Java, hence the problem! any help appreciated 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');
}
}
?>
I don't know Jquery/Javascript too well at all but I can look at this code and see its pretty simple.. jQuery Panel: Code: $(document).ready(function() {
// Expand Panel
$(".open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$(".close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
and to trigger it from any link on the page it would need somethin like Code: $(".contact").click(function(){contactPanel()});
but I dont know how to give Panel code the name "contactPanel".. so this is where I'm stuck. how do i do this? also I have a "Open Contact Form" at the top of the page but I want to put a contact link at the very bottom and after the link is clicked i would like for the website to scroll up before the panel drops down.. is that possible? Hi everyone, So basically what I am trying to do here is make a navigation system for a website. I want to have a series of buttons that drop down a large panel with info and furhter links when you mouseover them, kind of like the Unilever site: http://unilever.com/ (mouseover the arrows to the side of "About us", Our Brands", etc). So I followed WebDesignerWall's Simple slide panel tutorial (http://www.webdesignerwall.com/tutor...for-designers/, which is basically exactly what I am after - except that I want to have the slide out/slide back happen on a mouseover/mouseout. The code I used looks like so: Code: $(document).ready(function(){
$(".btn-slide").mouseover(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
$("#panel").mouseout(function(){
$("#panel").slideToggle("slow");
$(".btn-slide").toggleClass("active"); return false;
});
});
It kind of works but is pretty easily broken in a way that you couldn't just put up with. The slider sometimes repeatedly slides in and out, apparently all by itself, and the panel is sometimes stuck open when the mouse is nowhere near it - and therefore technically should be be hidden. I also tried the same thing using hover rather than mouseover, but unfortunately that breaks it even worse, since I want the panel to stay open when the user's mouse is within the panel area, not just within the button. So I'm wondering if anyone can offer me any suggestions as to how to get this to work, or even just an alternative way to achieve a simliar effect? I do like the sliding animation but I'm willing to forgo that for reliable functionality. Thanks in advance for any help! hello everybody i need your help and experience for having code to show ( overlay / modal window ) to the user when closing or navigating away from the page ( i want put in this window facebook share to make the user to share the page in his facebook ) , bytheway i wanna use it in my wordpress in every post could it be happen ? Thanks for helping can any guys help me to fine the jquery based slide show right to left with next previous and auto facilities on div not on ul li based?
I am very new to js. I have a jquery plugin that is a live countdown timer and I would like to modify it. Can someone tell me how to modify the code below so that the date is 20 minutes from right now (currently it is set as 26 January 2013). Code: <script type="text/javascript">
$(function () {
var austDay = new Date();
austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
$('#defaultCountdown').countdown({until: austDay});
$('#year').text(austDay.getFullYear());
});
</script>
Hi All, I have this javaascript which validates fields on a form, and if one of the fields are empty or 0 it will turn that field red, but it does it individually and i want it to turn all fields that are in error in red at the same time, can someone help me with the below code on how i can accomplish this Code:
var inputsToCheck = Array('MainDisplayContentChange_txtTitleContent', 'MainDisplayContentChange_txtDescription', 'MainDisplayContentChange_txtjusitification','MainDisplayContentChange_txtDateRequired');
var obj;0
function formCheck() {
for(var i=0;i<inputsToCheck.length;i++)
{
obj = document.getElementById(inputsToCheck[i]);
if (obj.value == "") {
obj.style.backgroundColor = "red";
return false
}
else {
return true
}
}
}
Im new to javascript so this could be a simple change for someone with more knowledge then my self. the webpage is built with ASP.Net Thanks in Advance helo, i just want to know how to add the same panel by clicking on a button right below the button.. 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 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. 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'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>
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 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();
});
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) 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 |
|||||||