|
JavaScript - Html5 Slider Help, New To Javascript
Hello,
I am coding a slider for my portfolio which has divs that slide when you click either the arrow keys or the numbers below the slider's frame. I just can't figure out how to change the javascript/css file so that the current slide number, (the little numbers below the image), becomes a different color when you actively view it, so that it indicates to users number they're currently on. Thanks for help! Here's a draft of what it looks like so far in the front end with my grids still in place: HTML file: Code: <div id="slider" class="span-24 last">
<div id="slide2Left"> ←</div>
<div id="slideFrame">
<div id="slideBoard">
<!-- the slides -->
<div class="slidePoint">
Slide 1 Goes Here
</div>
<div class="slidePoint">
Slide 2 Goes Here
</div>
<div class="slidePoint">
Slide 3 Goes Here
</div>
<!-- end slideBoard -->
</div>
<div id="slideReference"></div>
<!-- end slideFrame -->
</div>
<div id="slide2Right" class="last"> →</div>
<!-- end slider section -->
</div>
Javascript code Code: // JavaScript Document
$(document).ready(function(){
var slideTime = 700;
var currentSlide = 1;
var totalSlides = $("#slideBoard > div").size();
var slideWidth = $('#slideFrame').css('width');
var slideAmount = parseInt(slideWidth);
function slideLeft(){
if(currentSlide > 1){
$("#slideBoard").animate({
left: ['+='+slideAmount, 'swing']
}, slideTime );
currentSlide += -1;
}
}
function slideRight(){
if(currentSlide < totalSlides){
$("#slideBoard").animate({
left: ['+=-'+slideAmount, 'swing']
}, slideTime );
currentSlide += 1;
}
}
function slideTo(slideNumber){
///*
slideNumber = parseInt(slideNumber);
slidePos = slideNumber -1;
var p1 = $('#slideBoard');
var position1 = p1.position();
var p2 = $('#slideBoard div:nth-child(' + slideNumber + ')');
//alert(p2.html());
var position2 = p2.position();
var slideFor = (-position1.left) - position2.left;
//alert('p1: '+ position1.left + ' p2: '+ position2.left + ' Sliding: '+slideFor);
$("#slideBoard").animate({
left: ['+='+slideFor, 'swing']
}, slideTime );
currentSlide = slideNumber;
//*/
}
$('#slide2Left').click(function(){
slideLeft();
});
$('#slide2Right').click(function(){
slideRight();
});
$(document).keydown(function(e){
if(e.keyCode == 37){
//alert( "left pressed" );
slideLeft();
return false;
}
if(e.keyCode == 39){
//alert( "rigt pressed" );
slideRight();
return false;
}
});
//# Slide Reference Tool
for(i = 1; i < (totalSlides+1); i++){
$('#slideReference').append('<div class="slideNumber">'+i+'</div>');
}
$('.slideNumber').click(function(){
slideTo($(this).html());
});
$(".slidePoint").touchwipe({
wipeLeft: function() { slideRight(); },
wipeRight: function() { slideLeft(); },
min_move_x: 20,
preventDefaultEvents: true
});
});
CSS Code Code: /* CSS Document */
#slider {
position: relative;
margin: 79px 0 50px 0;
height: 500px;
padding-bottom: 50px;
border-bottom: 1px solid #9B9B9B;
}
#slideFrame {
width:870px;
left: 40px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#test {
width:30px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#slideBoard {
position:absolute;
top:0px;
left:0px;
width:3000px;
min-height:400px;
margin:0px;
padding:0px;
background: #ccc;
opacity: .3;
}
.slidePoint {
width:870px;
min-height:400px;
height:410px;
display:inline-block;
margin:0px;
padding:0xp;
float:left;
}
.slidePoint p {
padding:5px;
}
#slide2Left, #slide2Right{
position:absolute;
top: 200px;
bottom: 5px;
cursor:pointer;
width:20px;
height:20px;
color:#9B9B9B;
border:#9B9B9B solid 1px;
border-radius: 5px;
padding:3px;
text-align:center;
display: inline-block;
}
#slide2Right{
left: 920px;
}
#slideReference {
position:absolute;
width: 770px;
min-height:10px;
bottom:5px;
left:50px;
text-align:center;
}
.slideNumber {
border-radius: 2px;
background:#929292;
color:#ffffff;
cursor:pointer;
display:inline-block;
padding:3px;
margin:3px;
text-align:center;
min-height:15px;
min-width:15px;
}
Similar TutorialsI am new to javascript (I started learning it today) so please explain it for newbies. I am trying to get the amount of video (in seconds) buffered already by the client and the whole duration of the video. Then, I divide them to get the precentage which was buffered so far. I have no problem storing the durating using: Code: var duration = document.getElementById('vid').duration
- returns "12.6" (seconds) I am struggling with getting the buffered time. I tried: Code: var buffered = document.getElementById('vid').buffered
This one returns "[object TimeRanges]". From what I understood this is some kind of an object (Like an array?). I tried returning "buffered.length" and I get "1" back. Please explain how I can do this. thanks I have a code that will randomly select a div from a list and inside of that div i want there to be a sound file. How would I use html5 and javascript to make it so that when a user clicks a button it would play whatever sound was associated with that button? Code: <div id="randomdiv1" class="article_example_div"> <embed src="Black Hawk Down - Music Video - Riot.mp3" width=25 height=25 autostart=false repeat=true loop=true></embed> </div> Sorry if this is the wrong forum for this question. I get confused about what forum to post a question in with regards to DHTML technologies since they are all frequently used together. Anyhoo, heres my question. I've recently discovered an interesting behavior. When I mouse over a nested element it triggers the 'onmouseout' event handler of the parent element. Take the following code snippet, for instance: Code: <table>
<tr>
<td onmouseout="window.alert('you moused out of td');">
<img src="image0.gif" style="height:50px; width:50px;" />
</td>
</tr>
</table>
In the code snippet above, the 'onmouseout' event handler executes when you mouse over the image nested inside the <td> element. I wouldn't have thought this would be the appropriate behavior since from my perspective the mouse is still inside the <td> element. Can someone make comments on this. Thank You. Edit: I've discovered that mousing over a nested element causes both an 'onmouseout' and an 'onmouseover' event for the parent element. They are called back to back. Seems a little bit of an odd sequence of events but maybe it makes sense in the grand scheme of things. Yeah, right. How could I make it so that instead of seeing a embed object you would just see a input button that says play. I do not need my users to be able to pause them. I really didn't know where to start with the javascript but i do have the html5 Code: <audio controls="controls"> <source src="BlackHawkDown-MusicVideo-Frontline.wav" type="audio/wav" /> <source src="BlackHawkDown-MusicVideo-Frontline.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> THANKS!!!! Hi there, I am just writing to see if I can receive some help regarding an issue I'm having? I have written this application: http://bit.ly/dOHwhp - It allows the user to make melodies and change the speed of playback. It uses HTML5 and JavaScript. What I'd really like to do is have the ability for the user to save the melody in some respect. At the moment, I am using a parse harsh method. I thought potentially the user could save the #... and then load it from the URL. I have a method of loading it from the URL but no current way of 'saving' it and loading the saved version, as such. I have a feeling it would be far more advanced but, I would love to have a download feature like they have on this site: http://patternsketch.com/ Could anyone help out? This is my JavaScript file as it stands (although all files can be discovered in the source code of the page) Code: // ===== VARIABLES =====
var isPlaying = false;
var curNote = 0;
var curTempo = 100;
// ===== FUNCTIONS =====
// playTune: Play the next note!
function playTune() {
if (isPlaying !== false) {
var nextNote = 60000 / curTempo / 4;
// Turn off all lights on the tracker's row
$("#tracker li.track").removeClass("active");
// Light up the tracker on the current track
$("#tracker li.track.col_" + curNote).addClass("active");
// Find each active note, play it
var tmpAudio;
$(".playBar[id^=control] li.track.active.col_" + curNote).each(function(i){
tmpAudio = document.getElementById($(this).data('sound_id'));
if (!tmpAudio.paused) {
// Pause and reset it
tmpAudio.pause();
tmpAudio.currentTime = 0.0;
}
tmpAudio.play();
});
// Move the track forward
curNote = (curNote + 1) % 16;
} // if (isPlaying)
} // playTune
// Make a new hash
function buildHash() {
// Start it
var newhash = '';
// For each track, check and add in a 0/1 as appropriate
$(".playBar[id^=control] li.track").each(function(i){
newhash += $(this).is('.active') ? '1' : '0';
});
// Separate it
newhash += '|';
// Now, toss in the note
newhash += $('#temposlider').slider('value');
// Check and see if we really need to update
if (location.hash != '#' + newhash) location.hash = newhash;
} // buildHash
// Read in our hash
function parseHash() {
if (location.hash.length > 0) {
// Split it up, work it out, removing the actual hashmark
var pieces = location.hash.substring(1).split('|');
// Set the lights
var lights = pieces[0];
$(".playBar[id^=control] li.track").each(function(i){
// Make sure we haven't exceeded
if (i >= lights.length) return false;
// Check our location, turn on class if need be
if (lights.charAt(i) == '1') {
$(this).addClass('active');
}
});
// Set the tempo
if (typeof pieces[1] !== 'undefined') {
$('#temposlider').slider('value', parseInt(pieces[1]));
$('#tempovalue').innerHTML = pieces[1];
curTempo = parseInt(pieces[1]);
}
}
} // parseHash
// Clear it!
function clearAll() {
$(".playBar[id^=control] li.active").removeClass('active');
}
// Run on DOM ready
$(document).ready(function(){
// Process each of the audio items, creating a playlist sort of setup
$("audio").each(function(i){
// Make a self reference for ease of use in click events
var self = this;
// Make a sub-list for our control
var $ul = $('<ul id="control_' + this.id + '" class="playBar">');
$ul.append('<li class="header">' + this.title + '</li>');
// Add 16 list items!
for (j = 0; j < 16; j++) {
var $li =
$('<li class="track col_'+j+'">'+self.id+'</li>')
.click(function(){
$(this).toggleClass('active');
buildHash();
})
.data('sound_id', self.id);
$ul.append($li);
} // for (i = 0; i < 16; i++)
// Append it up
$('<li>').append($ul).appendTo('#lights');
});
// Bind up a click for our button
$("#soundstart").click(function(){
if (isPlaying === false) {
// Start the playing!
curNote = 0;
isPlaying = setInterval(playTune, 60000 / curTempo / 4);
// Change our display
this.innerHTML = "Stop";
} else {
clearInterval(isPlaying);
isPlaying = false;
$("#tracker li.track").removeClass("active");
$("audio").each(function(){
this.pause();
this.currentTime = 0.0;
});
this.innerHTML = "Play";
}
});
$('#clearall').click(clearAll);
$('#reload').click(parseHash);
// ===== Misc =====
// Build or read the hash
if (location.hash == '') {
// I was building this at load - but now, no, just to be safe
//buildHash();
} else {
parseHash();
}
// Show our value, now that we've built off of the hash
$('#tempovalue').html(curTempo);
// Make our tempo slider
$('#temposlider').slider({
'value': curTempo,
'min': 30,
'max': 170,
'step': 2,
'slide': function(e, ui) {
curTempo = ui.value;
$('#tempovalue').html(curTempo);
if (isPlaying !== false) {
clearInterval(isPlaying);
isPlaying = setInterval(playTune, 60000 / curTempo / 4);
}
},
'stop': function(e, ui) {
buildHash();
}
});
});
On all my html 5 pages of http://www.countyfairgrounds.net I have a drop down javascript menu for selecting a state. The thing has worked for years fine. However in switching to html5 the validator will not validate it. The are saying the option tag is obsolete. First I don't java, I do html5 and css3 currently. Ca anyonepoint me to a script dropdown that I can cut and paste - that will validate?
I can play a sound on my local machine using the following code, but when I upload to a server the same code it does not play. I cannot work out why, the link below gives the code. The multi channel code is he http://www.storiesinflight.com/html5/audio.html I installed Firebug and insepcted the Net components and can see that the .wav files are being sought out but returning a 404 error. This would be fine, however the path being sought is correct. Clicking link does'nt play the sound, but removing the file and paring back to the directory brings you to the directory on the server and clicking the file does play the sound. The code works locally, and I simply cannot see what could be causing the issue in the server versions on both Firefox and Chrome. Hi i am very new to javascript. i want the slider type effect where i can show some images. Please see here in this site www.indiabazaaronline.com i want this kind of slider effect. Plzz any body help me. Thx in advance Hi everyone, I am trying to make an image mask using javascript. The basic idea is that the image on the canvas will appear as a black box. When the user hovers over the image a small part of it is revealed. I have attached a picture as an example because its quite hard to explain! Any help would be appreciated! Thanks, Luke How to make request "rtsp://localhost:554/sample_100kbit.mp4"? (in HTML5 or Javascript) I want to access video streaming data which source is present on Darwin server
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 I followed this tutorial to create a clickable image slideshow with javascript on a site's homepage. However, it appears that the javascript:slidelink() is still running beyond the intended area as some of my content below the container is now underlined as if it were a link, when it should not be. I can tell that the script is the issue because when hovering over the content it shows "javascript:slidelink()" but will not go to anything when clicked. Here is the code I'm using, which is placed in a Wordpress theme container: Code: <html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="image1.png"
var image2=new Image()
image2.src="image2.png"
var image3=new Image()
image3.src="image3.png"
var image4=new Image()
image4.src="image4.png"
var image5=new Image()
image5.src="image5.png"
var image6=new Image()
image6.src="image6.png"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="image1.png" name="slide" width="100" />
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
else if (whichimage==4)
window.location="link4.htm"
else if (whichimage==5)
window.location="link5.htm"
else if (whichimage==6)
window.location="link6.htm"
}
//-->
</script>
</body>
</html>
Can anyone spot what might be causing the issue? Thanks in advance! Hello there, I am new to UI Development, I had an issue in displaying slider, i have to use 3 sliders in my page, 2 are working fine but the 3rd slide is not getting displayed even though the code is same as the remaining 2. Below are my JS and HTML pages. Please reply me ASAP. Thank you. Java Script Code: // Time Slider $("#time_slider").slider({ range: true, min: 0, max: 1439, values: [540, 1020], slide: slideTime }); function slideTime(event, ui){ var minutes0 = parseInt($("#time_slider").slider("values", 0) % 60); var hours0 = parseInt($("#time_slider").slider("values", 0) / 60 % 24); var minutes1 = parseInt($("#time_slider").slider("values", 1) % 60); var hours1 = parseInt($("#time_slider").slider("values", 1) / 60 % 24); $("#time").text(getTime(hours0, minutes0) + ' - ' + getTime(hours1, minutes1)); } function getTime(hours, minutes) { var time = null; minutes = minutes + ""; if (hours < 12) { time = "AM"; } else { time = "PM"; } if (hours == 0) { hours = 12; } if (hours > 12) { hours = hours - 12; } if (minutes.length == 1) { minutes = "0" + minutes; } return hours + ":" + minutes + " " + time; } slideTime(); //----------------------------- // Trip Duration $("#duration_slider").slider({ value: 160, min: 0, max: 1440, step: 30, slide: slideDuration }); function slideDuration(event, ui){ var hours = Math.floor(ui.value / 60); var minutes = ui.value - (hours * 60); if(hours.length == 1) hours = '0' + hours; if(minutes.length == 1) minutes = '0' + minutes; $("#duration").text(hours+'hrs. '+minutes+'mins. '); } slideDuration(); //----------------------------- // Max Price $("#price_slider").slider({ value: 160, min: 0, max: 1440, step: 30, slide: slidePrice }); function slidePrice(event, ui){ var dollars = ui.value; $("#maxprice").text('$'+dollars); } slidePrice(); HTML Code: <head> <style> #slider-range{width:400px;} #slider-range,#time,#duration,#maxprice {margin:10px;display:block;} .ui-slider-horizontal .ui-state-default {background:url(images/scrub-btn.png) no-repeat scroll 50% 50%;} .flights-select {margin: -22px 0px 140px;} </style> </head> <body> <div class="flights-section-title">Flight Time</div> <div class="flights-section"> <ul class="inline"> <li><input class="radio" type="radio" name="2" checked="checked" value="a"><div class="flight-radio-label">Take-Off</div></li> <li><input class="radio" type="radio" name="2" value="b"><div class="flight-radio-label">Landing</div></li> </ul> <div class="leftnav-dot-divider"> <div id="time_slider"></div> <span id="time"></span></div> </div><!-- flight-section-slider --> <div class="flights-section-title">Max Trip Duration</div> <div class="flights-section"> <div class="leftnav-dot-divider"> <div id="duration_slider"></div> <span id="duration">2hrs. 0mins.</span> </div> </div><br /> <div class="flights-section-title">Max Price</div> <div class="flights-section"> <div class="leftnav-dot-divider"> <div id="price_slider"></div><span id="maxprice">$100</span> </div> </div><br /> </body I am truing to install the Coda Slider in my wordpress website, on a template page. The page is http://billboardfamily.com/?page_id=4 I can not get this up and running, as you can see. It is supposed to be like this: http://www.ndoherty.biz/ I have asked around about this, and nobody seems to be able to help me . Anyone know what I am doing wrong here? Thanks. the_process.php Code: <?php
/*
Template Name: The Process
*/
?>
<!-- Begin Stylesheets -->
<link rel="stylesheet" href="http:/www.billboardfamily.com/wp-content/themes/mensa/assets/css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http:/www.billboardfamily.com/wp-content/themes/mensa/assets/css/coda-slider-2.0.css" type="text/css" media="screen" />
<!-- End Stylesheets -->
<!-- Begin JavaScript -->
<script type="text/javascript" src="http:/www.billboardfamily.com/wp-content/themes/mensa/assets/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http:/www.billboardfamily.com/wp-content/themes/mensa/assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jhttp:/www.billboardfamily.com/wp-content/themes/mensa/assets/js/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#coda-slider-1').codaSlider();
});
</script>
<!-- End JavaScript -->
<?php include("header.php"); ?>
<?php include ('sidebar_theprocess.php'); ?>
<div id="theprocess">
<div class="coda-slider-no-js">
<h1>Coda-Slider 2.0</h1>
<noscript>
<div>
<p>Unfortunately your browser does not hava JavaScript capabilities which are required to exploit full functionality of our site. This could be the result of two possible scenarios:</p>
<ol>
<li>You are using an old web browser, in which case you should upgrade it to a newer version. We recommend the latest version of <a href="http://www.getfirefox.com">Firefox</a>.</li>
<li>You have disabled JavaScript in you browser, in which case you will have to enable it to properly use our site. <a href="http://www.google.com/support/bin/answer.py?answer=23852">Learn how to enable JavaScript</a>.</li>
</ol>
</div>
</noscript>
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 3</h2>
<p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 4</h2>
<p>Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor. Nullam pulvinar ultrices malesuada. Quisque lobortis bibendum nisi et condimentum. Mauris quis erat vel dui lobortis dignissim.</p>
</div>
</div>
</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
</div>
</div>
<?php get_footer(); ?>
Hello everyone, Sorry if this has been asked before but I couldn't fine one... I basically want a slider for my website so the user can click on the arrows overlaid onto of the image, and it will slide the image to the next one. There will need to be lots on the page at one time as it is a gallery theme website, so can't be processor hungry! Can someone point me in the right direction please? I have found several but the buttons are always on the outside of the image div. And also do not work well with more than one on the page at one time? Also... Is there a way to snap the scrolling so the mouse wheel is scrolled down, and then the page snaps to the next 'projectcontainter' div on my website? iScroll I was told is used for this buy I can't seem to find out where or how. I am new to all this javascript so any help would be appreciated! Website is located at: www.jb-design.me/marchupdate/ Thanks so much! I need to be able to drag an image from one browser window to a form text input in a different window, populating it with the image file name. I can do this easily, except that the result is the whole url, and I only want the filename to be inserted. In other words, it inserts http://www.path/path/file.jpg, but I just want to end up with file.jpg. I believe the file object .name property holds the info I need, but I don't know how to populate the input field with it. Any help appreciated. 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. Can someone please tell me if a bent percentage silder is possible (something like this http://www.codingforums.com/showthread.php?t=173255 only I want it to be bent about 330 degrees, and I wouldn't want to link to another class-I would like to host the entire code on my website)? Also, the reason I want the slider to be bent, is because I would like the slider to be a sort of bent rectangle, and when the user clicks/drags the slider, the rectangle would "fill" to that point (change its background color up to where the mouse is). Thank you. Bye.
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
});
});
|
|||||||