|
JavaScript - Jquery Gallery Problem
Hi, could someone please take a look at my page with a jQuery gallery that refuses to work, however, it works perfectly on my local computer.
View Page What is the problem, and how do I fix it? Similar TutorialsHi, I'm new to jQuery and I've set up a very basic image gallery. When the mouse is hovered over an image the description should disappear but at the moment when the mouse is hovered over any image all the descriptions for all the images are hidden. Is there any way to just apply the effect to one instance of the class rather than all of them at the same time? Thanks in advance. Code:
<html>
<head>
<link rel='stylesheet' type='text/css' href='gallery7.css'/>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$().ready(function(){
$(".images").hover(function(event){
$(".description").hide("slow",function(){ // Hides element i.e. it dissapears!!
});
});
});
</script>
<title>Basic Gallery</title>
</head>
<body>
<div class='images'>
<img src='images/cow.jpg'/>
<div class='description'>
This is a picture of a cow
</div>
</div>
<div class='images'>
<img src='images/indiana.jpg'/>
<div class='description'>
This is a picture of Indiana Jones
</div>
</div>
<div class='images'>
<img src='images/trek.jpg'/>
<div class='description'>
This is a picture of Enterprise
</div>
</div>
</body>
</html>
Code:
.images{
float: left;
}
.description {
position: relative;
top:-18px;
color: blue;
text-align: center;
background-color: gray;
opacity: 0.6;
}
does anyone know if there is a jquery image gallery/slider plugin that can be used multiple time on one page?
Hello Everyone, Sir i used setTimeout() function in my image gallery to scroll images , i used setTimeout("myfunction()",1) in my script. Now my image gallery is working properly but problem is that the speed of scrolling images if normal in firefox, but in internet explorer it is slow, and in google chrome it is very fast , Sir how to resolve this problem This is my javascript code : Code:
<html>
<head><title> My Gallery </title>
<style type="text/css">
#mainimagecontainer {
position:relative;
width:600px;
height:400px;
border-width:1px;
border-color:#cccccc #aaaaaa #aaaaaa #cccccc;
border-style:solid;
padding:5px;
}
#imagebuttoncont {
width:100%;
position:relative;
border-bottom:1px solid #cccccc;
text-align:center;
height:40px;
}
#buttontable .td {
padding:3px;
position:relative;
}
#buttontable .td a {
text-decoration:none;
font-size:14px;
color:gray;
font-family:verdana;
}
#imagecontainer {
position:relative;
width:575px;
height:350px;
overflow:hidden;
background-color:#efefef;
border-width:1px;
border-color:#cccccc #aaaaaa #aaaaaa #cccccc;
border-style:solid;
}
#imgs {
height:350px;
position:relative;
left:0px;
top:0px;
}
</style>
<script type="text/javascript">
var previous1=0;
var next1=0;
var value=575;
var imgcounter=1;
var flag=1;
function next()
{
var element = document.getElementById("imgs");
if(next1 >value && flag==1)
{
value = next1+575;
imgcounter=imgcounter+1;
if(imgcounter==5)
{
previous();
}
return;
}
next1 = next1+25;
element.style.left = "-"+next1+"px";
setTimeout("next()",1);
}
function previous()
{
var element = document.getElementById("imgs");
if(next1 <= 0)
{
next1=0;
value=575;
imgcounter=1;
return;
}
next1 = next1-25;
element.style.left = "-"+next1+"px";
setTimeout("previous()",1);
}
</script>
</head>
<body >
<div id="mainimagecontainer" >
<div id="imagebuttoncont">
<table id="buttontable" align="center">
<tr>
<td class="td"> <div id="link2"> <a href="#" onclick="next()" > next </a> </div></td>
</tr>
</table>
</div>
<center>
<div id="imagecontainer">
<div id="imgs">
<table id="imagegall" >
<tr>
<td width="590px" height="350px" > <img src="img1.jpg" height="350px" width="590px" > </td>
<td width="590px" height="350px" > <img src="img2.jpg" height="350px" width="590px" > </td>
<td width="590px" height="350px" > <img src="img3.jpg" height="350px" width="590px" > </td>
<td width="590px" height="350px" > <img src="img4.jpg" height="350px" width="590px" > </td>
</tr>
</table>
<div id="imgs">
</div>
</center>
</div>
</body>
</html>
Please some one help me , please add four photos to see image gallery Posted this in the wrong forum earlier. I'm pretty new to Java, so i may be missing something simple, but here is my problem; On this page http://keithfrenchdesigns.com/ under the work area the gallery images are showing no problem, but on the sideways scrolling page http://keithfrenchdesigns.com/sideways on page 4 it's not showing the gallery image like the div is missing(it's not), but if you click on one of the links it will pull up a blank. It also will not scroll past page 4 to page 5(or if you move the gallery area to say, page 2, it won't scroll any further either). Like the script for the gallery area is interfering with the sideways scrolling script. Please ignore the design on the site as it is just there so i can see how everything reads. Any help would be appreciated. Hi guys, I am currently stuck up on something.. check this page http://dev.andrewfopalan.com/new_slider.html Well for starters.. I am trying to mimic this effect.. http://www.vogue.com/ The slider on the very top.. A quick preview of what I did was.. I used this plugin.. easyslider().. And then edited it.. since I am still learning jQuery and javascript.. so I made changes to the controls... usually the elements for design.. all I did was that.. The first problem was how to make it center like the one on the vogue.. so it was done... Second the masking problem.. I had alot of trouble thinking how I am going to do this.. because whenever I used absolute position on masks and the controls, everything is messed up on all browser.. So my problem primarily was how to make the effect like vogue mask, so what I did was used opacity on the list... and add a class active that regains the opacity 1 on the middle part of the slider.. so that was done.. My follow up problem is whenever I am navigating through the slider.. I add the "active" class on the next item on the list.. up until there I am fine.. but when I am at almost at the end, at the 5th slider, I am not getting the active class? and after a couple of clicks on the "next".. it wont navigate through... here's the code for the next button: Code: // this gets the current location of the active slider on the list..
$("a#"+options.nextId).click(function(e){
var id= $('.active').attr('id');
//this removes the "active" class on the slider.. and then goes to the next item on the list.. and then add the class "active" to the next image slide..
$("ul li:nth-child("+(id)+")").removeClass('active').next().addClass('active');
// this is the plugin's animation to move to the next slide..
animate("next",true);
Heres' the code for the animate Code: function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p},
{ queue:false, duration:speed, complete:adjust,
}
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
heres the adjust code function Code: function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
I am very still new to this jQuery thing.. but I am trying my best to learn.. Hope someone could teach me and help me on this... Please take a look at oceangamer.com Press the login/Sign up in the header of the page. It slides down fine in IE but in mine it refuses to slide up if i click close. Every other browser, it works??? Whats the problem? Hi, JPlayer supports playlists, but it keeps the playlist in the javascript: Code: var myPlayList = [
{name:"Tempered Song",mp3:"http://www.miaowmusic.com/mp3/Miaow-01-Tempered-song.mp3"},
{name:"Hidden",mp3:"http://www.miaowmusic.com/mp3/Miaow-02-Hidden.mp3"},
{name:"Lentement",mp3:"http://www.miaowmusic.com/mp3/Miaow-03-Lentement.mp3"},
{name:"Lismore",mp3:"http://www.miaowmusic.com/mp3/Miaow-04-Lismore.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-04-Lismore.ogg"},
{name:"The Separation",mp3:"http://www.miaowmusic.com/mp3/Miaow-05-The-separation.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-05-The-separation.ogg"},
{name:"Beside Me",mp3:"http://www.miaowmusic.com/mp3/Miaow-06-Beside-me.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-06-Beside-me.ogg"},
{name:"Bubble",mp3:"http://www.miaowmusic.com/mp3/Miaow-07-Bubble.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-07-Bubble.ogg"},
{name:"Stirring of a Fool",mp3:"http://www.miaowmusic.com/mp3/Miaow-08-Stirring-of-a-fool.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-08-Stirring-of-a-fool.ogg"},
{name:"Partir",mp3:"http://www.miaowmusic.com/mp3/Miaow-09-Partir.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-09-Partir.ogg"},
{name:"Thin Ice",mp3:"http://www.miaowmusic.com/mp3/Miaow-10-Thin-ice.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-10-Thin-ice.ogg"}
];
I'm trying to read in an xml file into this "myPlayList" array so that I can have an easy way of updating it, but I'm having trouble understanding this array structure. In the JPlayer code they use "myPlayList[i].name" and "myPlayList[i].mp3" in a for loop to cycle through the playlist and display the links in a list. My idea was to get rid of the "myPlayList" var declaration and dynamically populate the array variable from my xml file: Code: var xmlDoc;
var myPlayList = []
if (window.XMLHttpRequest)
{
xmlDoc=new window.XMLHttpRequest();
xmlDoc.open("GET","playlist.xml",false);
xmlDoc.send("");
xmlDoc=xmlDoc.responseXML;
}
// IE 5 and IE 6
else if (ActiveXObject("Microsoft.XMLDOM"))
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("playlist.xml");
}
x=xmlDoc.getElementsByTagName("track");
for (i=0;i<x.length;i++)
{
myPlayList[i].name = x[i].childNodes[0].nodeName;
myPlayList[i].mp3 = x[i].childNodes[1].nodeName;
}
It didn't display any songs I'm not sure what I'm doing wrong. Please help. Also, I'm guessing this has been done before (although I did a google search and couldn't find anything), so If you could point me to some resources I'd appreciate it. If there is another simpler option (over xml) I'd like to know. Thanks. I am aware that there are common problems with this and that the fix is probably this: Code: $(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
However I can't figure out how to make my menu get in front of my jquery banner in ie6 and 7!! Ive been literally trying all day. Then I found that site explaining that that code would fix it. however I cannot get it to work with my site! Here is the link to my page: http://bit.ly/5fwhPP I'm not sure if just plopping that javascript before my other scripts will do it but it sounded like it from the page I found the code on. I could really use some help here I am completely jammed up and cant focus on anything else until i fix this stupid issue! Any help is therefore greatly appreciated! Hello, I have a problem with autocomplete of jQuery. Here is my code Code: $('input#recipient').autocomplete ({
source: function (request, callback) {
var dataString = {username : request.username};
$.ajax({
url: url.root + 'email/',
data: dataString,
//cache: false,
complete: function(xhr, result) {
if(result != 'success') return;
var response = xhr.responseText;
var usernameList = [];
$(response).filter('li').each (function() {
usernameList.push($(this).text());
)};
callback(usernameList);
}
});
}
});
Can you tell me what's the problem Thank you Hi, First of all, please excuse my ignorance of JQuery(and coding in general) - Although I hastily grab plugins and try to use them, I really do appreciate them, and also the help you may provide me with my problem! My problem is this - I was looking for a simple and effective slideshow to use in a website I was making. SimpleSli.de(http://www.simplesli.de/) was exactly what I was looking for. It works great when it works but sometimes when I load the page it kind of doesn't work. I don't know what is going on but only approximately 50 pixels of the slideshow is visible. This happens sporadically when you refresh the page multiple times, and seems to not work more often on Google Chrome. I've eliminated every possible wrong doing in my code and tried installing firebug to help me identify the problem but for now this is beyond my understanding. JS Lint also purged errors in the code but still the same intermittent problem. I tried to contact David Drew - the creator of SimpleSli.de but he has not responded to me. On top of this I was trying to Auto Play the slideshow on load but could not get this to work. The code for it is available on the SimpleSli.de website but I tried to implement it in every possible way but it did not work. This problem is secondary and not really a proper problem so no worries if you can't help me on this one. The website in question is http://www.argsecurityscotland.co.uk/ Thank you in advance for your time and expertise, I really appreciate it. I am trying to make a lightbox type plugin and I am running into a problem. I hope it is something simple that I am overlooking. Here is my code: jQuery.fn.overlay = function() { $(this).click(function() { $('body').append('<div id="over"></div>'); $('#over').fadeIn(); }); }; It (almost) does what it should. It draws the #over div to the screen just fine. The problem is when I try to access it. I try something like this and get no response: $(function() { $('#over').click(function() { alert('moo'); }); }); Its like the element is not getting the ID assigned to it. Does anyone have any ideas? Thanks in advance. Hi, I have a problem with a fade script using jquery, in firefox etc.. all is ok. But IE the fade does not fade it just comes in & out. If any one would be kind enough to have a quick look I would appreciate it. You can see the js in the main page, not an external file. The url is www.thecityspa.co.uk Hi, This must be a 1st. It works ok in IE...But not in Firefox? I need to use white text over a dark bg color or if possible over an image. The problem is in FF the white text distorts on fade The black text works ok when adding the white bg. See my test code below. (It can be copied straight in to test) If anyone could please take a quick look and give some pointers. Code: <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML DIR="LTR" LANG="en">
<head>
<title>Working-Test-Banner</title>
<style type="text/css">
#welcomebanner img {border: none;}
#wrapper{position:relative;}
#welcomebanner {margin: 0; padding: 0; position:relative;background-color:color:#fff;}
#welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
#welcomebanner li {display: none;}
p{font-size:30px;background-color:purple;color:#fff;}
h2{font-size:30px;background-color:#fff;color:#000;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery;
var welcomeBannerTimer;
function nextSlide(){
var el = $j('#welcomebanner');
var slides = el.data('slides');
var c = el.data('slideIndex');
var n = ((c+1) >= slides.length)? 0 : c+1;
el.data('slideIndex', n);
$j(slides[c]).fadeOut(null, function(){
$j(slides[n]).fadeIn();
});
}
function over(){
clearInterval(welcomeBannerTimer);
}
function out(){
welcomeBannerTimer = setInterval(nextSlide, 3000);
}
$j(window).load(function() {
var el = $j('#welcomebanner');
var slides = $j('#welcomebanner>li');
if (slides.length < 2){
$j(slides[0]).show();
return;
}
el.data('slides', slides);
el.data('slideIndex', 0);
welcomeBannerTimer = setInterval(nextSlide, 3000);
el.bind('mouseenter', over).bind('mouseleave', out);
$j(slides[0]).show();
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="welcomebanner">
<li>
<h2>testing the text fade</h2>
<p>testing the text fade</p>
</li>
<li>
<h2>Firefox and IE problems</h2>
<p>Firefox and IE problems</p>
</li>
</ul>
</div>
</body>
</html>
Hi, i'm having problems with my console game, when i type in help when testing it just doesn't do anything, it's probarly a stupid mistake but i can't find what i did wrong :s index.html code Code: <html> <head> <script type="text/javascript" src="scripts/jquery.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Console Game Project</title> </head> <body> <div id="console"> <p id="message_startgame">Welcome to Nieli's game! To control the game you must type in commands</p> <p id="area_northcorridor">You are in the north door. There is a sword on the ground.</p> <p id="message_help" style="display: none;">Here is a list of commands</p> <!-- PLACEHOLDER: THIS IS WHERE EVERYTHING WILL BE INSERTED BEFORE --> <div id="placeholder"></div> <form onsubmit="return false;"> <input type="text" size="50" autofocus="autofocus" id="command_line" /> </form> </div> <script type="text/javascript" src="scripts/game.js"></script> </body> </html> game.js code Code: //been to variables
beentonorthdoor = true;
//
//Item variable
sword = false;
//
//Current room
currentroom = "n_corridor";
//
$(document).ready(function() {
$("form").submit(function() {
var input = $("#command_line").val();
if (input == "help") {
$("#message_help").clone().insertBefore("#placeholder").fadeIn(1000);
}
$("#command_line").val("");
}};
}};
I have on my website ( www.nieeli.com/game/ ) the index.html, then a folder scripts with jquery.js and game.js in.. Could anyone help me Oh, just noticed there is a Jquery help section... Sorry It's functional and works, it just doesnt "fade in". Anyone know why it's not fading in? Code: function addPerson() {
//current keeps track of how many people we have.
var strToAdd = '<div id="input" class="ideaInput"><label class="idea">Another Name</label><input name="idea[]" class="idea" type="text"/>'
strToAdd += '<label class="description">Description (optional)</label><textarea name="description[]" class="description"></textarea></div>'
$('#all-inputs').append(strToAdd);
};
$(document).ready(function() {
$('#btnAdd').click(function () {
$(addPerson).fadeIn('slow')
});
});
I am having trouble with a plugin not working, so I contacted the creator, and they said the below. I have no idea how to do what they want. Can anyone help me out? "Hi The Billboard Family, We just took a look at your output. It looks like you have jquery loading 3 times, which is not good. This will cause most all jQuery plugins/code to break if you load the jquery library more than once. It looks like you have it loading with your "Enhanced Search Box" and then again at the end of your head just before your "Cycle.All" script. Please be sure that the PHP method wp_head() is that LAST piece of code running before your close head tag in your header.php file as well as wp_footer() being the LAST piece of code running before your close body tag in your footer.php file. I would also recommend running WordPress' wp_enqueu_scripts() method, detailed here by Jamie: http://getsatisfaction.com/slidedeck/... Once you get those changes made and jQuery running only once please let us know if you are still having problems. Cheers! " MY SITE: http://billboardfamily.com/?page_id=4 Hello guys, I have implemented the jquery validation in one of my projects. I have a <div> which has all the billing details & another <div> below it which has the shipping details. There is a checkbox in between these <div>'s which says "Same as Billing Address". It is used to populate all the shipping fields from the billing fields. Well, on this particular form there are some fields which are mandatory & which I have validated by jquery validation. I have used the $("#form_id").validate().form(); statement to check validation on the click event of the checkbox. The actual problem is that after page loads, I directly click on the checkbox & submit the page, the page gets submitted & validation does not execute. If I click the submit button with the checkbox unchecked then the validation runs properly. Why is my form not being validated if I checked the checkbox? Please guys, help me out. Thanks in advance. Bhavik. I am being told that a snippet of JQuery code in a website that I have inherited is having problems with a $() JQuery Library Implementation. It seems to keep throwing a "tagName" error. An offered solution was to recode the JQuery into traditional JavaScript using getElementById(). I'm new to JavaScript and clueless to JQuery. I'm not exactly sure how to start. How would something like this be changeable to Javascript? Code: <script type="text/javascript">
$(document).ready(function() {
$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
document.forms["loginForm"].elements.loginUser.focus();
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
});
</script>
So, basically what i'm doing here is hovering over the h2 heading and toggling the paragraph text. What i'm having a problem doing is changing the h3 headings so that they toggle the same way...is there a way to do this within this function without ids/classes? Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#hdg').hover(function() {
$('div[title=latin]').toggle();
$('div[title=english]').toggle();
$('#').html('<h3>English</h3>');
});
});
</script>
Hi all, I was following this tutorial for a jquery based scroller but I am having some problems: http://www.webdesignbooth.com/create...carousel-lite/ When it loads the block starts out as I want it then suddenly squeezes down and chops the text? The area in question is 'Featured Employers' http://www.beta.educationvacancies.com/index.php Can anyone advise? many thanks, greens85 |
|||||||