|
JavaScript - Hey Guys, An Image Selector Problem Here (help!)
its me again! and yeah i need some insight from you guys. i cant seem to get this code to work and i know my flaw is in my "bloat();" function. help me out?
Code: <?xml version = "1.0" encoding = "utf-8"?>
<!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>
<title>Test 4</title>
<script type = "text/javascript">
function preload(){
images = new Array();
images[0] = new Image();
images[0].src = "image1.png";
images[1] = new Image();
images[1].src = "image2.gif";
images[2] = new Image();
images[2].src = "image3.png";
images[3] = new Image();
images[3].src = "image4.jpg";
images[4] = new Image();
images[4].src = "image5.gif";
}
function bloat(){
if(document.getElementById("image1").onMouseOver === true){
document.getElementById("main").src = "image1.png";}
else if(document.getElementById("image2").onMouseOver === true){
document.getElementById("main").src = "image2.gif";}
else if(document.getElementById("image3").onMouseOver === true){
document.getElementById("main").src = "image3.png";}
else if(document.getElementById("image4").onMouseOver === true){
document.getElementById("main").src = "image4.jpg";}
else(document.getElementById("image5").onMouseOver === true){
document.getElementById("main").src = "image5.gif";}
}
</script>
</head>
<body onLoad = "preload();" bgcolor = "orange"><center>
<img src = "bloat();" alt = "main" id = "main" height = "400" width = "450"><br /><br />
<a href = "http://www.joystiq.com">
<img src = "image1.png" alt = "image1" id = "image1" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.engadget.com">
<img src = "image2.gif" alt = "image2" id = "image2" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.amazon.com">
<img src = "image3.png" alt = "image3" id = "image3" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.newegg.com">
<img src = "image4.jpg" alt = "image4" id = "image4" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.smc.edu">
<img src = "image5.gif" alt = "image5" id = "image5" onMouseOver = "bloat();" height = "200" width = "225"></a>
</center></body>
</html>
so essentially the way this should look is a list of five images tiled length wise. when you onMouseOver one it becomes a bigger image right above them. when you click the "thumbnails" as i'll call it, you get linked to a web page. i got everything formatted right however i think there is an error with my function. any insight fellas? thanks! Similar TutorialsHey folks.. Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website. Thanks in advance of any help Nat <script language="JavaScript"> /* Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com) For this script and more, visit http://www.javascriptkit.com */ var delay=10000 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="http://www.anywebsite.com/images/splash1.jpg" randomimages[1]="http://www.anywebsite.com/images/splash2.jpg" randomimages[2]="http://www.anywebsite.com/images/splash3.jpg" randomimages[3]="http://www.anywebsite.com/images/splash4.jpg" randomimages[4]="http://www.anywebsite.com/images/splash5.jpg" var preload=new Array() for (n=0;n<randomimages.length;n++) { preload[n]=new Image() preload[n].src=randomimages[n] } document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script> I would appreciate some help, I want to use the Drop Down Image selector II script on a website, to display fabric, as there is a large number of samples, I want to break the list up alaphabetically. Is is possible to use the script more than once on a page, when I tried to do this the script did not work, if it can not be used more than once on a page, has anyone seen a program that could be. Thanks I'm currently setting up a website that will display, for each link in the drop down, an image below the box, and text or, if necessary, an image to the right, describing the item & listing materials & prices. I've tried iframes with a drop down, but because I'm hosted with BraveHost, I end up with 50 ads on the main page, and 50 more in the iframe, so I'd like to avoid that if possible. If you want to see what I'm looking for, go here. http://andicrafts78.bravehost.com/test.html. How can I modify the drop down selector to make it happen?
I have a problem with a rather complicated js... I got the functions i must use for a clock on a js file.. i have to set up the variables for it on another js file though but those are easy enough the question is...how do i make a Menu that the user can alter the display of the clock? eg: insted of 21:30 -->09:30 pm and so on...this thing s been buggin me for days now. and i cant seem to go around this problem Thanx in advance. hi, you all know we put codes on the address bar right? ex. javascript: (Code) I Can't remember how can i load from the address bar a script for ex. from my dekstop (External) or any site .... Thanks to all! example Code: javascript:src="something.js" ????? Hey! I'm working on a website that has the bubble navigation jquery script in it, but every time I combine it with another jquery script, it kind of goes bonkers. Right now, I'm trying to combine it with this circular image slider, here are the tutorials from the two scripts I'm using: http://tympanus.net/codrops/2010/04/...n-with-jquery/ http://www.baijs.nl/tinycircleslider/ And here's my script so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiny Carousel: A lightweight jQuery plugin</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
<!--[if lte IE 6]>
<style type="text/css">
/* Internet Explorer 6 PNG transparency fix */
#rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-rotatescroll.png", sizingmethod='scale'); }
#rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-thumb.png", sizingmethod='scale'); }
</style>
<![endif]-->
<script type="text/javascript" src="example/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="example/js/jquery.tinycircleslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
});
</script>
<title>Awesome Bubble Navigation with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Awesome Bubble Navigation with jQuery" />
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#fff url(images/bg_scoot1.png) no-repeat top left;
}
.title{
width:548px;
height:119px;
position:absolute;
top:300px;
left:250px;
background:transparent url(title.png) no-repeat top left;
}
a.back{
background:transparent url(back.png) no-repeat top left;
position:fixed;
width:150px;
height:27px;
outline:none;
bottom:0px;
left:0px;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><a href="http://www.baijs.nl"><img src="example/images/hdr3.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr2.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr1.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr4.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr5.jpg" /></a></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
<div id="content">
<a class="back" href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery"></a>
<div class="title"></div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>User</h2>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Properties</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Home</h2>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Shop</h2>
<ul>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">Offers</a></li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Photos</h2>
<ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">Prints</a></li>
<li><a href="#">Submit</a></li>
</ul>
</div>
<div class="item fav">
<img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Love</h2>
<ul>
<li><a href="#">Social</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Comments</a></li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
</body>
</html>
Hi I'm not a programmer if someone could help me fix this it would be great thanks. here is the code I found a while ago. Code: <!-- SUBMENU ROLLOVER SCRIPT -->
<script type="text/javascript">
window.onload=function () { setStyles(); };
function setStyles() {
ids = new Array ('contentMenu1','contentMenu2','contentMenu3','contentMenu4');
for (i=0;i<ids.length;i++) {
document.getElementById(ids[i]).className='notactive';
document.getElementById(ids[i]).onclick=function() { return CngClass(this); }
}
}
function CngClass(obj){
var currObj;
for (i=0;i<ids.length;i++) {
currObj = document.getElementById(ids[i]);
if (obj.id == currObj.id) {
currObj.className=(currObj.className=='notactive')?'active':'notactive';
}
else { currObj.className='notactive'; }
}
//return false;
}
</script>
<!-- END SUBMENU ROLLOVER SCRIPT -->
and the html is here Code:
<ul class="contentMenuContainer">
<li id="contentMenu1" class="notactive"><a href="javascript:ajaxpage('aj-wildlife.html', 'homeInfo');" onClick="setStyles('contentMenu1');" >wildlife</a></li>
<li id="contentMenu2" class="notactive"><a href="javascript:ajaxpage('aj-solitude.html', 'homeInfo');" onClick="setStyles('contentMenu2');">solitude</a></li>
<li id="contentMenu3" class="notactive"><a href="javascript:ajaxpage('aj-theboat.html', 'homeInfo');" onClick="setStyles('contentMenu3');">the boat</a></li>
<li id="contentMenu4" class="notactive"><a href="javascript:ajaxpage('aj-hosts.html', 'homeInfo');" onClick="setStyles('contentMenu4');">your hosts</a></li>
</ul>
OK so all I need is to know how to set a list item to be class="active" by default. I tried setting it to "active" but the script must reset them all to "notactive". Sorry for being such a noob. Any help is greatly appreciated. thanks I have a series of hand-made arrays each of which has many elements, eg Code: var BlobI = new Array("id1","id2","id4",..."id32");
var Blob2 = new Array("id1","id3","id5",.."id31");
and I have a script (with much help, some time back) which makes the elements change style, with the changes happening successively, element by element: Code: function noBlob (arrayA,visibility,current) {
var arrayB=(typeof arrayA == 'string')? arrayA.split(',') : arrayA;
var blob = document.getElementById(arrayB[current]);
blob.style.visibility = visibility;
if (current != arrayB.length - 1) {
current++;
setTimeout(function() {noBlob(arrayB, visibility, current)},100) }}
If I could get rid of all the ids (400+), both in the html and in the arrays, the whole thing would be much lighter. In theory, because of the way the elements in the arrays are arranged, I could use different iterations of the nth-child() selector to round up the elements of each array. What I'm not clear about is this: there are several stand-alone selector engines, eg, Sly and Yass. They look as if they need to be used in conjunction with some more extensive js library, but I just want to combine the arrays the engine would return with my existing script. Is this possible? eg, if using YASS (http://yass.webo.in/), something like: Code: var newBlob1 = _('div.BLOBS':nth-child(1))
var newBlob2 = _('div.BLOBS':nth-child(2))
Has any one experience with either engine? Can anyone tell me what I have done wrong here? I have the following html code Code: <div id='group1'>
<tr class='time'>
<td colspan='3' name='1262815200'></td>
</tr>
<tr>
<td class='timeleft group1' name='1262815200' colspan='3'></td>
</tr>
<tr class='game'>
<td><input type='radio' name='G1' value='NYJ'>NYJ</td>
<td><input type='radio' name='G1' value='BUF'>BUF</td>
<td><select name='G1P' class='points' tabindex = '1'></select></td>
</tr>
</div>
and when I use the selector $('#group1 input) it does not select anything (namely the inputs in this code). But when I use the selector $('div input') it will select them (and more on the page which I don't want). Is anyone able to see what I have done wrong? I've tried everything I can think of in terms of testing, and I have narrowed it down to the selector. Thanks. I have been using some javascript to select stylesheets (dependent upon window sizes) without problems, until IE8. I have stripped the code down to the following which seems to be where it fails in IE8. Code: <link rel="stylesheet" type="text/css" href="../../css-home.css" title="default" /> <link rel="stylesheet" type="text/css" href="../../css-thin.css" title="thin" /> <link rel="stylesheet" type="text/css" href="../../css-medium.css" title="medium" /> <link rel="stylesheet" type="text/css" href="../../css-large.css" title="large" /> <link rel="stylesheet" type="text/css" href="../../css-home.css" title="normal" /> Code: <script type="text/javascript">
<!--
function changeStylesheet(description){
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
if(a.getAttribute("title") == description){a.disabled = false;} // if the title of the css file is the same as the description, don't disable it
else if(a.getAttribute("title") != "default"){a.disabled = true;} // otherwise if the title of the css file is not default, disable it
}
}
function selectLarge(){
changeStylesheet("large");
}
selectLarge();
// -->
</script>
The “normal” stylesheet is the same as “default”. Without this older versions of IE go straight to “large” (without javascript). For these settings, all browsers display the default (or normal?) stylesheet without the script. When the script is run Firefox, Opera and older versions of IE will use the “default” stylesheet combined with the “large” stylesheet. IE8 uses only the “default” and ignores “large”. It doesn’t appear to matter where in the page the script is run. Any suggestions appreciated (it has never worked in Safari, Chrome and older versions of Opera if that helps!). I have been using the following html & have tested it cross-browser with no malfunction Code: <a href="#quicklinks" name="modal">Quick Links</a> <a href="#Login" name="modal">Login</a> js part Code: //select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//using href as id (already defined in CSS)
$(id).fadeIn(2000);
Now a senior guy says that what I am doing with selectors is essentially illegal, I quote him Quote: Another potential problem is your use of the name attribute. When used with "A" tags, the name attribute is equivalent to the ID attribute, meaning that each name on a page should be unique. It's possible that the javascript engine is only setting the onclick() on the first element with the "modal" name. Plz guide me Long story short, I'm a novice webdesigner basically working with the local people, and small businesses. My Javascript abilities are sub-par so I normally try to follow tutorials or examples to implement java for now. Although I digress. To the point... I'm coding a web site for a photographer and need a natural looking picture selecting menu. For example... X = hidden image not scrolled into view O = image in line of sight X - X - X - X - O - O - O - O - X - X - X - X Now you kinda grasp what I'm attempting to do here.. anyone know of a good tutorial or example showing how to do this? I've seen several auto scrolling menus but that's not what I'm looking for. I just want an intuitive nav bar for pics... WHY IS THIS SO HARD!!!! Thanks for your time in advance. Overview Well it's been a while since I've been here! Another set of eyes on this would really help me out. I have a simple slider plugin that I wrote in jQuery. One of the parameters that I've written is which element you want to be the container for each slide. In the example I'm going to post, I'm using a list item (li). The Problem Due to lazy coding or whatever, I really made a blunder of things inside my plugin. Throughout the plugin, I'm calling that parameter directly. Because of this, the script context is being applied to EVERY element on the page. So...when I pass in the tag jQuery selector: $('li') as the element selector, it works...but it applies the slider effects to every <li> on the page, not just the container I assign to the plugin. Every time I change $('li') to anything more specific at all (a class, an id, better selector) or I rewrite the plugin to use something more specific (hard-coded), the browser usually crashes due to an unresponsive script. I'm seeing this in Chrome & Firefox. I'm guessing this some kind of weird closure-memory leakage issue that I'm just not ready to handle, or something about the way jQuery and event delegation/binding works. The frustrating thing is that if I do a console.log of the element parameter, and I use something more specific....it returns just fine! The script blows up the page though.... The Code Code: <html>
<head>
<script>
(function($) {
$.fn.extend({
luSlider: function(options) {
var o = $(this);
var defaults = {
element : $(this),
direction: 'left',
next: null,
prev: null,
distance: null,
speed: 'slow',
prevAtEnd : null,
nextAtEnd : null,
prevNextEvent: null,
pagination: false,
elementClick : false,
pager : $(this),
callback: null
};
var options = $.extend(defaults, options);
o.data('curPosition','');
// set cursor for next & previous buttons
if (options.prev != null) options.prev.css('cursor','pointer');
if (options.next != null) options.next.css('cursor','pointer');
// Wrap all of our items in a super large div with hidden overflow
o.find('ul').first().wrap("<div style='width:999999px;' id='luSliderWrapper'></div>");
o.css('overflow','hidden');
// If no distance specified, do it based on the width of a single element
var totalWidth = 0;
var el = options.element;
// Get the total width of all our items
el.parent('ul').css({'padding':'0px','margin':'0px'});
el.each(function() {
totalWidth += $(this).outerWidth(true);
//float our items to the left
el.css({'display':'block','position':'relative','float':'left'});
});
// Get individual item width
var itemWidth = totalWidth / el.size();
//var itemWidth = el.outerWidth(true);
// Get the number of visible items based on our container size
var spaceUsed = $(this).innerWidth() / itemWidth;
var numVisibleItems = Math.floor( spaceUsed );
/*
if (spaceUsed % 1 > 0 ) {
$(this).css({'padding-left':itemWidth/2,'padding-right':itemWidth/2});
}*/
// a variable to store the number of items
var numItems = el.size();
if (options.distance == null) options.distance = itemWidth;
/* Initialize the location */
if ( $(this).data('curPosition') == undefined ) {
$(this).data('curPosition',0);
}
// get the total number of pages
var numPages = Math.ceil(numItems / numVisibleItems);
togglePrevNext();
buildPager();
return this.each(function() {
if (options.elementClick) {
//el.click(function() {
// document.location = $(this).find('a').attr('href');
// });
}
// var cb = options.prevNextEvent;
// Animate Next
options.next.click(function() {
togglePrevNext();
var theEnd = endOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', Math.round( (o.data('curPosition')) + 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "-=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
});
// Animate Previous
options.prev.click(function() {
togglePrevNext();
//var theEnd = endOfShow('prev');
var theEnd = startOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', (o.data('curPosition') - 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "+=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
}); // end prev.click
$('#luSliderPager li').click(function() {
var curPage = $('li.activePage').index();
var newPage = $(this).index();
var direction = (curPage > newPage) ? "+=" : "-=";
var distance = Math.abs(curPage - newPage) * options.distance;
if (options.pagination) {
distance *= numVisibleItems;
}
var newLeft = direction + distance;
// set position
o.data('curPosition', newPage);
movePager();
// animate
el.stop(true,true).animate({
"left" : newLeft
},options.speed);
});
}); // end return
function togglePrevNext() {
(startOfShow() ) ? options.prev.addClass(options.prevAtEnd) : options.prev.removeClass(options.prevAtEnd);
(endOfShow() ) ? options.next.addClass(options.nextAtEnd) : options.next.removeClass(options.nextAtEnd);
}
function handleCallBack() {
if (typeof options.callback == "function") options.callback(o,options);
}
// Determine our boundaries...and if we've reached them
function startOfShow() {
return(o.data('curPosition') <=0 ) ? true : false;
}
function endOfShow() {
if (options.pagination) {
return (o.data('curPosition') >= numPages-1) ? true : false;
} else {
return (o.data('curPosition') >= (numItems - numVisibleItems) ) ? true : false;
}
}
function movePager() {
$('.activePage').removeClass('activePage');
$('.pager').eq(o.data('curPosition')).addClass('activePage');
}
function buildPager() {
/* Custom CSS rule for pager default */
var style = "<style type='text/css'> #luSliderPager li { float: left; display:block; width:13px; height:16px; padding: 0 5px; }";
style += ".pager { background:url('luSlider/images/pager_button-sprite.png') left top no-repeat; cursor:pointer; }.activePage { background-position:left -15px; }</style>";
$(style).appendTo("head");
var numItemsPerPage = o.width() / itemWidth;
var pager = "<ul id='luSliderPager'>";
for (var x = 0; x < numPages; x++ ) {
if (o.data('curPosition') == x) {
pager += "<li class='pager activePage'></li>";
}else {
pager += "<li class='pager'></li>";}
}
pager += "</ul>";
$(pager).appendTo(options.pager);
}
function showPager() {
}
}
});
})(jQuery);
</script>
<script>
$(function() {
/* * * * * * * * Slider Code * * * * * * * */
var myCB = function(o, options) {
// my callback function executed after every transition
//console.log(o.numVisibleItems);
}
$('#sliderContainer').luSlider({
element : $('li'),
next : $('#slide_terms_right'),
prev : $('#slide_terms_left'),
speed : 1000,
prevAtEnd : "slide_terms_prev_disabled",
nextAtEnd : "slide_terms_next_disabled",
elementClick : true,
pagination : true,
pager : "#pager",
callback : myCB
});
)};
</script>
</head>
<body>
<div id="sliderContainer">
<ul id="mySlides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
</body>
</html>
notes the line var el = options.element; is where I start to have issues. The example I mentioned of hard-coding & console.log that works is this: Code: ...
var el = options.element;
console.log(el); //displays what I'd expect, a jQuery object
el = o.find('li'); // only find li's that are children of the div attached to the plugin
console.log(el); //displays exactly what I'd expect, a jQuery object of JUST the right li's
// if I change el to be this new selector tho...the browser page will crash. 'Unresponsive Script' etc.
...
Please ignore anything hard-coded into the plugin, I tossed several things in for brevity. Also if you have any other code cleanup tips, I'm more than receptive. Also for this example I removed all of the crazy ajax and php and other template-y type stuff. I noticed the problem when I embedded the slider on my page and my top navigation menu (which uses a <ul>) started scrolling off the screen when I clicked on my slider arrows :P THANK YOU SO MUCH, -Celt Hi I have the code below. I am trying to get the radio button selector to highlight on mouseover and remain highlighted until focus is taken away from the highlighted selector. [CODE] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body > <div onmouseup="setBack(Radio1,1)" style="width:1000px; height:1000px"> <input id="Radio1" type="radio" name="RadioGroup" /><label id="lblRadio1" for="Radio1" title="Radio1" onmouseover="setBack(Radio1, 2)" >Radio1</label> <div onmouseup="setBack(Radio2, 1)" style="width:1000px; height:1000px"> <input id="Radio2" type="radio" name="RadioGroup" /><label id="lblRadio2" for="Radio2" title="Radio2" onmouseover="setBack(Radio2,2)">Radio2</label> </div> </div> <p> </p> <p> </p> <script type="text/javascript"> function setBack(rdo, area) { switch (area) { case 1: rdo.style.background = "White"; break; case 2: rdo.style.background = "Blue"; break; default: rdo.style.background = "White"; break; } } </script> </body> </html> [CODE] is it possible to reposition the ibeam cursor in a textarea. im using a button to insert stuff into a text area and then focus but i would like the selector to appear at a certain point. Thanks, Steve, Hi, the source code on the website below i want to know what do i need to change to get the date to show as dd/mm/yyyy instead of mm/dd/yyyy? http://www.nsftools.com/tips/DatePickerTest.htm thanks for your help I would appreciate if anyone could guide my point by point on how one could create a category picker just like gumtree (preferably in jquery): http://www.gumtree.com/add_posting.html?location_id=uk Specifically the points How clicking on a category opens another to the right How clicking on a category appends a variable like "#cat-10201" into the url (and vice versa) How css lists are used instead of form select menus (making it easily styled) How clicking on a deep subcategory automatically preselects all parent categories I'm not looking for anyone to actually code it for me (that would be outrageous ) but tips on how it's actually structured and steps on how it can be coded would be highly appreciated. I can do PHP and I know CSS also. I don't know plain javascript but I'm sure I can do most of it in jQuery Hi again Folks I had another learning bump I'm going to ask Well I can't seem to hide the selector that I'm supposed to hide.. well to see for yourselves here's the link..' http://dev.crownshipping.com.ph/single_update.html I have a list of boats.. and each one of them has details.. Code: <ul>
<li>boat1 details</li>
<li>boat2</li>
<li>boat3</li>
</ul>
initially the boat details are hidden... so when i click the boat a modal window pops up.. and a dialog where you can see the boat details.. during the first try.. everything is okay.. but when i close the modal window.. when i click another boat to view, the previous one that was not supposed to show.. were displayed.... I have tried hiding it.. by doing $('class name').hide();.. also I have tried setting the css again to display:none.. but still a no go.. I'm fairly new to javascript and jquery so please help me.. I have tried all that I have learned.. maybe there's a trick that i still don't know.. here's the js code.. hope someone can help me be easy on me.. i just started 2 days ago.. i'm on day 3 Thanks Code: $(document).ready(function() {
//select all the a tag with name equal to modal
$('a.modal').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag value to match with class name later
var id = $(this).attr('href');
//document.write (id);
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//transition effect
$('.window').fadeIn(1000);
if(id=="" || id=="#")
{var check = "";
document.write ('no value!');}
else{
var check = '.' + id;
//document.write (check);
$(check).fadeIn();
}
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').fadeOut(1000);
// $('.window').hide();
});
});
Hi guys I kinda needed help on jQuery/ javascript.. Here's the test page.. http://development.andrewfopalan.com/devpage/test.html# what I'm trying to do is like this.. http://trailers.apple.com/trailers/s...bandofmisfits/ the movie box... so far, I have made the cosmetics.. but the thing I was going to ask was.. when you click on the down arrow.. a popup dropdown list is going to show.. the problem is I am copying the same effect as the one with apple.. when you click outside of the popup dropdown list, the dropdown list should be fading out... but it wouldnt... I tried using doing.. it like this Code: $("#wrap" ).click(function () {
$(".dropdown").fadeOut();
});
but the problem is.. whenever I click the down arrow button.. it continues to fadeout.. as soon as it fadesin... how should I do this? please guide me.. everything works just fine.. just this one.. I am really lost.. i the whole jquery code is in the page sirs... please help me pretty new to javascript/jquery.. This is pretty much my first really useful script that I wrote myself. I am trying to load a different index.html page for each different screen size that the browser has. So the page looks best at different resolutions. I am not really able to test it since I haven't finished building all the different resolution index pages yet. I am just wondering if anyone sees any glaring errors in my coding. This is my script: Code: <script src="javascript/stndlibrary.js">
var screendim=getWindowSize();
var screenwidth=screendim[0];
var screenlength=screendim[1];
var screenw=new array(640,800,1024,1280,1400,1600,2048); //Array for standard screen widths
var screenh=new array(480,600,768,1024,1050,1200,1536); //Array for standard screen heights
var indexfilename=new array('vga','svga','xga','sxga','sxgap','uxga','qxga'); //Array for filenames for different pages for each screen size
for (i=0;i<=6;i++);
}
if (screenwidth <= screenw[i]) && (screenlength <= screenh[i]);
{
window.location.replace('http:\\perezcomputer.com\'+indexfilename[i] + 'index.html');
break;
}
}
</script>
The stndlibrary.js file contains the function I wrote to fetch the screen width and height that will be passed back to the script. that function is he Code: function getWindowSize() {
if (window.innerWidth)
theWidth=window.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth)
theWidth=document.documentElement.clientWidth;
else if (document.body)
theWidth=document.body.clientWidth;
if (window.innerHeight)
theHeight=window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
theHeight=document.documentElement.clientHeight;
else if (document.body)
theHeight=document.body.clientHeight;
return [theWidth, theHeight]
}
Please be gentle I am a nOObi... |
|||||||