Advertisements

Archive

Posts Tagged ‘JQuery’

Thickbox(3.1) not working with latest jQuery?


Issue while using Thickbox(3.1) jquery

We have implemented thick box jquery image popup in one of our products and it is not working properly. But the refered site shown that it is working fine. We have debugged the issue and found that the issue happening once the jquery trying to get all images with same rel attribute. In the refered site it is achieved by the code

       TB_TempArray = $("a[@rel="+imageGroup+"]").get();
 

Here we are getting error and was not able to get all images with same attribute. After the long checking we have found that, the issue is due to the latest jquery files that we used. In latest jquery @ is not valid, so we have removed the @ from above code and it is working fine now. 

How to get all images with same rel attribute in JQuery

    
      TB_TempArray = $("a[rel="+imageGroup+"]").get();
 

We are hoping that someone may have great help fron this post, because we were spending so many time for resolving the issue.

Advertisements
Categories: JQuery Tags:

Very simple JQuery News Ticker created within three steps.

May 12, 2011 1 comment

In most of the website we can see that latest news and updates are shown on right or left panel. We can implemented vertical newsletter using jquery with three steps only. By using this vertical news ticker we can shown our company’s latest news, ads, announcements, events and updates with more attractive and wonderful animations.

Step by Step process to create vertical newsletter using jquery

1. Go through this link  and save .js files as jquery.js

2. Go through this link  and save .js file as jquery.vticker-min.js.

3. Create a html page and copy paste below codes to html page and save as index.html.

 
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>vTicker</title>
<metaname="description"content=" "/><metaname="keywords"content=" "/>
<styletype="text/css"media="all">body, html
{padding: 0;margin: 0;}
body
{background: #00000;}
#news-container
{width: 200px;margin: auto;margin-top: 30px;
border-bottom: 2pxsolid#333333;border-top: 2pxsolid#333333;}
#news-containerullidiv{
border-bottom: 1pxsolid#aaaaaa;padding: 2px;background: #ffffff;
}
</style><scripttype="text/javascript"src="jquery.js">
</script><scripttype="text/javascript"src="jquery.vticker-min.js">
</script><scripttype="text/javascript">
$(function() {$('#news-container').vTicker({
speed: 900,
pause: 3000,
showItems: 1,
animation:'fade',
mousePause:true,
height: 0,
direction:'down'
});
});
</script>
</head>
<body>
<divid="news-container"><ul><li><div>
1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info
</div></li><li><div>
2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info
</div></li><li><div>
3) Lorem ipsum dolor sit amet more info more info more info more info
</div></li><li><div>
4) tuvian.com jquery vticker more info more info more info more info more info
</div></li></ul></div>
</body>
</html>

News ticker is ready..! Please run the index.html page and you can see the nes ticker with content scrolling to down, with some time interval, speed and fade animation. You can also customize your news by adjusting some values in the html page.

speed: 900,
pause: 3000,
showItems: 1,
animation: 'fade',
mousePause: true,
height: 0,
direction: 'down'
Please change the above code portion in the html page and enjoy the changes seen in your news ticker.
Categories: JQuery Tags:
%d bloggers like this: