|
JavaScript - Simlple Js/html Problem.... Displaying A Hidden Slider When <anchor> Is Clicked
/**
The <a> is a list of menu items that when clicked.... a specific gallery-slider-images should been shown in relation to the galleryId....<div class"gallery" is hidden in CSS> I'd like to use jQuery to complete this task if at all possible, I know it's prob SIMPLE to U GURU's but being new i can't seem to .show() the selected 'gallery' w/o showing them all........... BEST REGARDS _ STH <div id="gallery-menu"> <?php foreach ($galleries as $gallery) : ?> <a onclick="showGallery(<?= $gallery['gallery']['id'] ?>); return false;"><?= $gallery['gallery']['name'] ?> <?php endforeach ?> </div> <?php foreach ($galleries as $gallery): ?> <div id="<?= $gallery['gallery']['id'] ?>" class="gallery"> <div class="slider" style="width; 100%; height: 100%;"> <ul> <?php foreach ($gallery['images'] as $image): ?> <li class="galleries-container"> <img src="<?= UCMVC_APP_BASE_URL ?>/gallery/retrieve-image/<?= $image['id'] ?>" alt="<?= $image['name'] ?>" title="<?= $image['name'] ?>" /> </li> <?php endforeach; ?> </ul> </div> </div> <?php endforeach; ?> // javascript // function showGallery(galleryId) { ????!?!?!?!?! } Similar Tutorialshi, on my site: http://helix3d.previewsite.co.uk/marketing.html the images slide onto the next when the numbers are clicked, I would like to have this functionality on the actual image... need a bit of help here?! Code: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Helix</title>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css" title="default" /><!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow1').after('<div id="nav1" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav1',
befo onBefore
});
$('#slideshow2').after('<div id="nav2" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav2',
befo onBefore
});
$('#slideshow3').after('<div id="nav3" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav3',
befo onBefore
});
$('#slideshow4').after('<div id="nav4" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav4',
befo onBefore
});
$('#slideshow5').after('<div id="nav5" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav5',
befo onBefore
});
function onBefore() {
$('#title').html(this.alt);
}
});
</script>
</head>
<body>
<div id="top">
<div id="topwrapper">
<a href="index.html"><div id="logo">
</div></a>
<ul id="rightnav">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="news.html" title="News">News</a></li>
<li><a href="services.html" title="Services">Services</a></li>
<li><a href="archive.html" title="Archives">Archive</a></li>
<li><a href="finishes.html" title="Finishes">Finishes</a></li>
<li><a href="showreel.html" title="Showreel">Showreel</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
</ul>
<nav>
<ul>
<li><a href="events.html" title="HELIX EVENTS">HELIX EVENTS</a></li>
<li><a href="marketing.html" title="HELIX EXPERIENTIAL MARKETING" class="menuselected">HELIX EXPERIENTIAL MARKETING</a></li>
<li><a href="film.html" title="HELIX FILM & TV SET CONSTRUCTION">HELIX FILM & TV SET CONSTRUCTION</a></li>
<li><a href="exhibitions.html" title="HELIX EXHIBITIONS">HELIX EXHIBITIONS</a></li>
<li><a href="interiors.html" title="HELIX COMMERCIAL INTERIORS">HELIX COMMERCIAL INTERIORS</a></li>
</ul>
</nav>
<div class="line"> </div>
</div>
</div>
<div id="content">
<section id="slider">
<div id="viewport">
<div id="container">
<div id="section-1" class="section">
<img src="images/hero_experiential.jpg">
</div>
</div>
</div>
</section>
<div class="line"> </div>
<div id="left">
<h1>HELIX MARKETING</h1>
<p>We help brands and agencies create experiences that excite, surprise and delight. Our attention to detail and fast-paced production bring your experiential marketing to life and ensure memorable, positive brand connections.</p>
</div>
<div id="right">
<img src="images/quote-marketing.gif" alt="Marketing quote" />
<ul>
<li class="youtube"><a href="#"><img src="images/yt.png" alt="youtube" /></a></li>
<li class="twitter"><a href="#"><img src="images/twit.png" alt="Twitter" /></a></li>
<li class="facebook"><a href="#"><img src="images/fb.png" alt="Facebook" /></a></li>
</ul>
</div>
<div class="clear"> </div>
<div class="dashedlinetop"> </div>
<div id="box1">
<h1>01</h1>
<h2>V Hand</h2>
<p>We were contracted by Speed Communications PR to turn ideas from the creative team at The Game Changer into reality. The concept was a giant hand over 30 ft tall making the V for Virgin sign, designed to look as if it had burst up through the ground.</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client: Virgin Business Media.<br>
Agency : Speed Communications.<br>
Creative : The Game Changer<br>
Location : Canary Wharf</li>
</ul>
<div id="casestudy1"><a href="case-study-virgin.html">CASE STUDY</a></div>
<div id="slideshow1" class="pics">
<img src="images/marketing/virgin1.jpg" alt="1"/>
<img src="images/marketing/virgin2.jpg" alt="2"/>
<img src="images/marketing/virgin3.jpg" alt="3"/>
<img src="images/marketing/virgin4.jpg" alt="4"/>
<img src="images/marketing/virgin5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box2">
<h1>02</h1>
<h2>Cat Walk</h2>
<p>We were commissioned by Mischief PR to design, manufacture and project manage the installation of the world's first car mounted fashion catwalk. We scoured London for priceless shoot locations normally off limits and organised logistics to enable a super fast, film shoot set up.</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client : Vauxhall.<br>
Agency : Mischief PR.<br>
Creative : Dan Glover.<br>
Location : St Paul's Cathedral</li>
</ul>
<div id="slideshow2" class="pics">
<img src="images/marketing/carwalk1.jpg" alt="1"/>
<img src="images/marketing/carwalk2.jpg" alt="2"/>
<img src="images/marketing/carwalk3.jpg" alt="3"/>
<img src="images/marketing/carwalk4.jpg" alt="4"/>
<img src="images/marketing/carwalk5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box3">
<h1>03</h1>
<h2>Tower of Terror</h2>
<p>As the centre piece of the European launch of the Disney's new Tower Of Terror ride in Paris, Cow PR commissioned us to design and build a full seized replica model of a lift car from the ride. The twist was that the lift had to look as if it had crash landed!</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client : Disney<br>
Agency : Cow PR<br>
Creative : Claire Myddleton<br>
Location : Leicester Square</li>
</ul>
<div id="slideshow3" class="pics">
<img src="images/marketing/tot1.jpg" alt="1"/>
<img src="images/marketing/tot2.jpg" alt="2"/>
<img src="images/marketing/tot3.jpg" alt="3"/>
<img src="images/marketing/tot4.jpg" alt="4"/>
<img src="images/marketing/tot5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box4">
<h1>04</h1>
<h2>Ice Age 3</h2>
<p>The set for this experiential brief; for 20th Century Century Fox's Ice 3 movie launch, was designed in house by Brian Dowling. The experience included an chilled Ice Cave and a jungle equipped with rock faces, real plants, a bridge, a lake and heated humidified air. </p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client.: 20th Century Fox.<br>
Agency : Designwerk<br>
Creative : Scott and Ed<br>
Location : CWOA</li>
</ul>
<div id="slideshow4" class="pics">
<img src="images/marketing/ice1.jpg" alt="1"/>
<img src="images/marketing/ice2.jpg" alt="2"/>
<img src="images/marketing/ice3.jpg" alt="3"/>
<img src="images/marketing/ice4.jpg" alt="4"/>
<img src="images/marketing/ice5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box5">
<h1>05</h1>
<h2>Hanging gardens of paddington</h2>
<p>When Mischief PR wanted to create "The Hanging Gardens of Paddington" for the launch of boutique Hotel Indigo there was only one company on the call sheet. We devised a plan to cantilever the giant basket 40ft above the street, the story went global, the launch was a huge success.</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client : International Hotel Group<br>
Agency : Mischief PR<br>
Creative : Dan Glover<br>
Location : Paddington</li>
</ul>
<div id="slideshow5" class="pics">
<img src="images/marketing/basket1.jpg" alt="1"/>
<img src="images/marketing/basket2.jpg" alt="2"/>
<img src="images/marketing/basket3.jpg" alt="3"/>
<img src="images/marketing/basket4.jpg" alt="4"/>
<img src="images/marketing/basket5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<footer>
<ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="events.html" title="Events Design">Events Design</a></li>
<li><a href="marketing.html" title="Marketing Design">Marketing Design</a></li>
<li><a href="film.html" title="Film & Set Design">Film & Set Design</a></li>
<li><a href="exhibitions.html" title="Exhibition Design">Exhibition Design</a></li>
<li><a href="interiors.html" title="Commercial Interior Design">Commercial Interior Design</a></li>
<li><a href="#" title="Sitemap">Sitemap</a></li>
<li><a href="contact.html" title="Contact Helix Ltd">Contact Helix Ltd</a></li>
<li><a href="news.html" title="Latest Helix News">Latest Helix News</a></li>
<li><a href="careers.html" title="Careers">Careers</a></li>
</ul>
<!--<div class="copyright">©2011 Helix </div> -->
</footer>
</div> <!-- end content -->
</body>
</html>
Sorry I am new to JavaScript. Says that a.html has two same anchor links (<a href="b.html">b</a>). The anchor links are uneditable but we could add JavaScript to the a.html. Except for dynamic adding onclick event, any other ways could get to know which anchor link being clicked? Title basically says it. I need to get the object that was just clicked, to insert into a JavaScript function. I've tried "function('this')" and similar things, but it doesn't work. I'm sure this is REALLY easy to do, but I don't know it and I have no idea what to search for. Thanks Hello, My goal is to show a series of embedded youtube videos on one page but allowing the user to hide or show any youtube video by clicking a button associated with a specific youtube video on the page. I made a form that submits the youtube embed code to a mysql database and I created a php file to retrieve every embed code using a for loop. For each iteration of the for loop, a youtube video will pop up with a corresponding button which will allow the user to hide or show the youtube video. It works when there is only one entry in the mysql table but does not work when more youtube embed codes are uploaded. For example, when there are two youtube embed codes uploaded, two buttons are created, but when I click either of the two buttons, it will only show or hide the first youtube embed. None of the buttons will show the second youtube video. Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>hide/show iframe</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <style type="text/css"> <!-- #frDocViewer { width:70%; height:50%; display:none; } --> </style> <script type="text/javascript"> <!-- function HideFrame() { var fr = document.getElementById ("frDocViewer"); if(fr.style.display=="block") { fr.style.display="none"; } else { fr.style.display="block"; } } //--> </script> </head> <body> <?php mysql_connect ("","","") or die(mysql_error()); mysql_select_db ("") or die(mysql_error()); $lastid = mysql_query ("SELECT * FROM embed ORDER BY id DESC LIMIT 1"); $lastid = mysql_fetch_assoc($lastid); $lastid = $lastid['id']; for ($count=1; $count<= $lastid ; $count++) { $iframe = mysql_query ("SELECT * FROM embed WHERE id=$count "); $iframe = mysql_fetch_assoc($iframe); $iframe = $iframe['url']; echo " <img src='utube.gif' onclick='HideFrame()' /> <div id='frDocViewer'> $iframe </div> "; } ?> </body> </html> thanks in advance So I have this timeline that runs from 1991 to 2011, and it's broken into two parts. What I want to happen is when a user clicks the links to each section the slider will respond. This is an example of how I want it to function: http://www.stevenserna.com/test2 And after some modification and implementation this is what I have so far(the links to change the timeline are in the top left): http://www.stevenserna.com/test It seems like the second section doesn't want come up and stay next to the first section and instead stays below it. If you increase the height of the mask in the style file you can see the second section hanging out below. This kind of seems more like a CSS issue but I thought I would post it in here since has to do with a javascript based slider. Any help would be awesome! Thanks! I am using a JQuery Slider function in one of my forms that has the folowing code: Code: <script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + "% Clear" );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
});
</script>
And the form looks like: Code: <form method=POST etc...>
<div id="slider"></div>
<span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>
Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again. However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks! Hi, I cant get the following to work... help would be very much appreciated, thank you. I also have it uploaded on pagemaster.co.za/_test/ <!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 charset="utf-8"> <title>Test Slider</title> <link href="test.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body onLoad="slideA()"> <div id="container"> <img src="images/img1.jpg" id="imgslide" /> <div id="left_holder"><img onClick="slide(-1)" class="left" src="images/arrow-left.png" /></div> <div id="right_holder"><img onClick="slide(1)" class="right" src="images/arrow-right.png" /></div> </div> <script type="text/javascript" src="test.js"></script> </body> </html> #container { height: 360px; width: 960px; margin: 20px auto; position: relative } #imgslide { height: 360px; width: 960px; position: absolute } #left_holder { height: 360px; width: 100px; position: absolute; left: 0px; top: 0px; } #right_holder { height: 360px; width: 100px; position: absolute; right: 0px; top: 0px; } .left { height: 48px; width: 48px; position: absolute; top: 40%; left: 0px; } .right { height: 48px; width: 48px; position: absolute; top: 40%; right: 0px; } and the js... var imagecount = 1; var total = 8; function slide(x) { "use strict"; var Image = document.getElementById('img'); imagecount = imagecount + x; if (imagecount > total) { imagecount = 1; } if (imagecount < 1) { imagecount = total; } Image.src = "images/img" + imagecount + ".jpg"; } window.setInterval(function slideA() { "use strict"; var Image = document.getElementById('img'); imagecount = imagecount + 1; if (imagecount > total) { imagecount = 1; } if (imagecount < 1) { imagecount = total; } Image.src = "images/img" + imagecount + ".jpg"; }, 5000); if you look on my website here you will see a slider on the front page. works fine on all browsers except for internet explorer. on IE, when each picture scrolls, the page will scroll itself down to the bottom. also, after about 4 pictures are scrolled, the slider stops and is just a white box for the rest of the time. does anyone have any ideas??? thanks (if you check the validator it says something about not understanding the value "allowTransparency") thanks again! Hi All I'm new here. I'm not a javascript coder but I can copy/paste and follow instructions. I'm using easyslider1.7 which is based on jquery. I have it set up and it's working. The problem I'm having with it is when I refresh the page or go to a different page on my site the slide images seem to "spill" out of the slider and it takes a second or so for the images to get back into position. I see this same slider on other sites and this problem doesn't happen. I've tried giving the container div a fixed height but that didn't help. Does anyone know what might cause this and what I should look for? thanks marloo Hi I have created this page http://kylehouston.com/new/ were I have added a content slider in the main banner then another in the footer, these work fine in ff but ie7 doesnt seem to agree instead giving me an error, how do i get around this? Thanks in advance! Kyle Hi, I have been playing with Slidersjs and have it sliding through my images just fine, however the previous/next and slide identifiers below the images don't seem to work and I can't see how to make them active. The temp link is he http://mono-zine.com/Mono.LogDM.html and the slide is the second one down. The identifiers should be clickable to take you to a specific slide, whilst they do change they dont click. Any help gratefully received. The script is from he http://slidesjs.com/ Cheers Hello all! I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more. It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca). My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time. Here is my Javascript: Code:
var categoryLink=new Array();
var counter;
var link = "";
categoryLink[0] = "";
categoryLink[1] = "";
categoryLink[2] = "";
counter = "0";
$(document).ready(function() {
$(".atonal").live('click', function() { {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "atonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".tonal").live('click', function() {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "tonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".being").live('click', function() {
alert("sometext");
categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
if (categoryLink[1]=="") {
categoryLink[1] = "being";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".doing").live('click', function() {
alert("sometext");
if (categoryLink[1]=="") {
categoryLink[1] = "doing";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".abstract").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "abstract";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".documentary").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "documentary";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
and the HTML in question: Code: <table> <tr> <td height="35" width="210" valign="top">choose your sound</td> <td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td> <td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td> </tr> <tr> <td height="35" width="210" valign="top">choose your text</td> <td width="165" valign="top"><a href="#" id="being">being words</a></td> <td width="165" valign="top"><a href="#" id="doing">doing words</td> </tr> <tr> <td height="35" width="210" valign="top">choose your image</td> <td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td> <td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td> </tr> </table> I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great! hi all, I have a very serious problem with the coda-slider (I guess you know the coda-slider). I have 5 panels with lots of content, I have a panel buttons and DropDownLists. When I click one of this buttons or dropdownlist, the javascript function that calls the coda-slider is lost and does not work. Any ideas? thanks... I'm using the Nivo slider (http://nivo.dev7studios.com/) for a banner with different thumbnails for the controls. After several hours of wrestling with the CSS, I was able to make it so each thumbnail could have its own style and hover. Now the JS doesn't work - meaning, the banner doesn't slide when I click any of the thumbnails. Can anyone help me out with this? I'm very much a beginner with JS. Here's my HTML: Code: <div id="slider" class="nivoSlider">
<img src="images/banner-1.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<img src="images/banner-3.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<span class="nivo-controlNav">
<a class="nivo-control smerch"> </a>
<a class="nivo-control gervais"> </a>
<a class="nivo-control karl"> </a>
<a class="nivo-control insects"> </a>
</span>
</div>
Here's my CSS: Code: /*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider {
position:relative;
width:984px;
height:501px;
background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;}
#slider a {
border:0;
display:block;}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;}
.nivo-controlNav a {
display:block;
width:99px;
height:67px;
border:0;
margin-right:3px;
float:left;}
.nivo-controlNav a.active {
background-position:0 -22px;}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;}
a.nivo-prevNav {
left:15px;}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {clear:both;}
#slider .nivo-controlNav {
position:absolute;
bottom:0; /* Put the nav below the slider */
left: 0;
width: 984px;}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
height: 67px;
width: 99px;
position: relative;}
.nivo-control {
cursor:pointer;}
.nivo-controlNav a {position: absolute; bottom: -122px;}
.smerch {right: 38px; background: url(images/mn-thumb-1.png) top left no-repeat;}
.smerch:hover{background: url(images/mn-thumb-1-over.png) top left no-repeat;}
.gervais {right: 134px; background: url(images/mn-thumb-2.png) top left no-repeat;}
.gervais:hover{background: url(images/mn-thumb-2-over.png) top left no-repeat;}
.karl {right: 238px; background: url(images/mn-thumb-3.png) top left no-repeat;}
.karl:hover{background: url(images/mn-thumb-3-over.png) top left no-repeat;}
.insects {right: 342px; background: url(images/mn-thumb-4.png) top left no-repeat;}
.insects:hover{background: url(images/mn-thumb-4-over.png) top left no-repeat;}
Not sure if this is needed, but here's the section of the JS for the controls: Code: //Add Control nav
if(settings.controlNav){
var nivoControl = $('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
}
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
I'm at a loss. Any help would be great. Thanks. Here's a quick visual of the parts of the slider: http://i.imgur.com/tkE2Y.png Hi guys, Having a little bit of trouble with a site I'm currently working on... I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc. Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like: http://www.mySiteOfFun.com/index.html#page=news.html; This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example). I can't add a #, because one is already being used to reference the anchor for the content div. Has anyone run into a similar problem before? If so, how did you resolve it? Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that? Just not sure how to progress really, and any help would be greatly appreciated! Hi, i would like to explain my situation, basically, i am trying to create a slider with thumbnails. The slider is complete, works very well. The only problem is that the captions are just not appearing properly. I had a situation where the captions did work but they had to be coming in from the slideOut functions but what i want is for it to be displayed when the person hovers over the image. This is what it looks like at the moment... This is when the caption is coming from the top. i would like to implement Code: http://web.enavu.com/demos/caption/ or this Code: http://www.sohtanaka.com/web-design/examples/image-hover/ Doesnt matter which one into my slider when an image is hovered over (not the thumbnail) the actual image, then the caption covers the whole image displaying whatever text... Coding: (HTML) Code: <div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#">
<img style="height:534px;" src="http://i55.tinypic.com/.png" alt="" />
</a>
<a href="<?php echo get_permalink(253); ?>">
<img src="http://i51.tinypic.com/.jpg" alt="" />
</a>
<a href="<?php echo get_permalink(256); ?>">
<img src="http://i52.tinypic.com/.png" alt="" />
</a>
<a href="<?php echo get_permalink(258); ?>">
<img src="http://i53.tinypic.com/.png" alt="" />
</a>
<a href="<?php echo get_permalink(271); ?>">
<img src="http://i53.tinypic.com/.png" alt="" />
</a>
</div>
<div class="descriptions">
<!--welcome page-->
<div class="desc">
<strong style="font-size:30px;">Welcome to City Water</strong>
<div class="clear"></div><br/>
<div id="sliderdescription">WHATEVER WHATEVER</div>
</div>
<!--Services page-->
<div class="desc">
<?php $post_id = 253; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong>
<div class="clear"></div><br/>
<div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
<div class="desc">
<!--Products page-->
<?php $post_id = 256; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
<div class="desc">
<!--Information page-->
<?php $post_id = 258; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
<div class="desc">
<!--Accounts page-->
<?php $post_id = 271; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
</div>
</div>
<div id="hrline"></div>
<div class="paging">
<ul class="thumb">
<li><a href="#" rel="1"><img src="http://i55.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="2"><img src="http://i56.tinypic.com/.jpg" class="thumbnails"/></a></li>
<li><a href="#" rel="3"><img src="http://i51.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="4"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="5"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
</ul>
</div>
</div>
CSS Code: /*--Main Container--*/
.main_view {
float : left;
height :488px;
margin-bottom :1px;
margin-top :-40px;
position :relative;
}
/*--Window/Masking Styles--*/
.window img{
height :492px;
width : 974px;
}
.window {
/*--Hides anything outside of the set width/height--*/
border :3px solid #D7D7D5;
color : #B4B4B4;
font-size : 12px;
font-weight : bold;
height :488px;
overflow : hidden;
position : relative;
width : 974px;
}
.image_reel {
left : 0;
position : absolute;
top : 0;
}
.image_reel img {
float : left;
}
.image_reel ul li {
display : inline;
}
#image_reel .caption {
background-color :#000;
bottom :0;
color :#ffffff;
height :100px;
position :absolute;
width :100%;
z-index :600;
}
#image_reel .caption .content {
}
#image_reel .caption .content h3 {
color :#1DCCEF;
margin :0;
padding :0;
}
/*--Paging Styles--*/
.paging {
/*--Assures the paging stays on the top layer--*/
/*--Hidden by default, will be later shown with jQuery--*/
bottom : -25px;
display : none;
line-height : 40px;
position : absolute;
right : -70px;
text-align : center;
z-index : 100;
}
.desc {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 101;
margin-top:275px;
color: white;
font-size: 2em;
padding: 7px;
}
JAVASCRIPT Code: $(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
hideComment();
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
showComment();
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
play = null;
}, function() {
rotateSwitch(); //Resume rotation
});
showComment = function(){
// slide toggle effect set to slow you can set it to fast too.
$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).show(700);
return true;
};
showComment(); // Show Comment initially
hideComment = function(){
$(".desc").stop(true,true).slideUp(500).hide();
};
//hide comment if you click on it
$(".desc").click(function(){
hideComment();
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#imgSlides {
display: none;
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript">
var img = [];
img[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png",
cap: "",
url: "",
des: ""
};
img[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png",
cap: "",
url: "",
des: ""
};
img[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg",
cap: "",
url: "",
des: ""
};
img[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg",
cap: "",
url: "",
des: ""
};
for (var imgs=[], i=0; i<img.length; i++){
imgs[i] = new Image();
imgs[i].src = img[i].src;
}
var curPic = 0;
var fadeTimer;
var speed = 50;
var opacStep = 0.5;
var dirn = -1;
var curOpac = 10;
function fade(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
}
function setOpacity() {
curOpac += opacStep * dirn;
if (curOpac < 0){
swapImage();
curOpac = 0;
document.getElementById("autoPic").onclick = function(){
dirn = (dirn==1) ? 0 : 1 ;
}
dirn = 1;
fade();
return;
}
if (curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
document.getElementById("autoPic").onclick = function(){
dirn = (dirn==-1) ? 0 : -1 ;
}
dirn = -1;
setTimeout(fade,1000);
return;
}
if (imgSlider.style.opacity=="string"){
imgSlider.style.opacity = curOpac/10;
}
else {
imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
imgSlider.style.MozOpacity = curOpac/10;
}
}
function swapImage(){
curPic = (++curPic > img.length-1) ? 0 : curPic;
imgSlider.src = img[curPic].src;
}
function prevImage(){
document.getElementById("prevImage").onclick = function fade(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
}
function setOpacity() {
curOpac += opacStep * dirn;
if (curOpac < 0){
swapImage();
curOpac = 0;
dirn = 1;
fade();
return;
}
if (curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
document.getElementById("prevImage").onclick = function(){setTimeout(fade,1000);}
return;
}
if (imgSlider.style.opacity=="string"){
imgSlider.style.opacity = curOpac/10;
}
else {
imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
imgSlider.style.MozOpacity = curOpac/10;
}
}
function swapImage(){
curPic = (--curPic < 0)? img.length-1 : curPic;
imgSlider.src = img[curPic].src;
}
}
window.onload = function(){
imgSlider = document.getElementById('imgSlides');
imgSlider.src = img[curPic].src;
imgSlider.style.display = 'inline';
document.getElementById("autoPic").onclick = fade;
prevImage();
}
</script>
</head>
<body>
<img id="imgSlides" src="" alt="" />
<br />
<a id="prevImage" href="#">PREV</a>
<a id="autoPic" href="#" title="Play / Pause">AUTO</a>
</body>
</html>
I've taken reference of this code from this forum and altered it a bit to achieve the effect that an image will be changed once the prev button is pressed. Image by image fading works well in IE8 (press the button once, the image is changed once; when pressed again, it changes again; step by step) But in Firefox 4, it just auto fades into another image. I tried to debug it in the Firefox console but due to my lack of knowledge in JS, I could not find the root of the problem. Can anyone explain a bit why it works in IE but not in Firefox? I am trying to write a function that will dynamicly add an anchor, and then scroll to it, then remove the anchor. The script is adding the anchor, and changing the hash, but no scrolling is happening, (IE7) Any idea whats wrong? Code: function set_anchor( obj ){
name = 'anchor_'+Math.floor(Math.random()*1111);
new_anchor = document.createElement('A');
new_anchor.name = name;
new_anchor.href = '#'+name;
new_anchor.appendChild( document.createTextNode(' ') );
obj.appendChild( new_anchor );
window.location.hash = name;
new_anchor.parentNode.removeChild( new_anchor );
}
|
|||||||