|
JavaScript - Jquery Carousel Plugin And Thumbs Plugin Help.
Hello! I am new to the boards, I am a graphic and web designer. Been designing and developing web sites since 2001. I have fun doing it and was lucky enough to have someone hire me to do it and get paid for it. The reason I signed up to the boards is so that I can search for some help since I am starting to learn jQuery I am having a little bit of trouble with a page I am working on and was hoping someone would be able to help me out!
The problem: I have a spry collapsable panel with 4 panels, in the panels I have jQuery carousel plugins with the thumbs plugin. The problem I am having is that I want the carousel in the 4 panels like I mentioned before but I can only get one of the panels to function fully. The other three loses their forward back functions. I tried copying the code for the first one and just renaming the classes and functions so it would separate the two. The thumbs plugin will still work, I just can not get the carousel function to repeat on another one. I will post the code I have left off with. If you need to see the page you can message me. Thanks for reading and if you can help it will be great! Here is the java: Code: $(document).ready(function () {
$('.infiniteCarousel').infiniteCarousel();
});
$.fn.infiniteCarousel = function () {
function repeat(str, num) {
return new Array( num + 1 ).join( str );
}
return this.each(function () {
var $wrapper = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul'),
$items = $slider.find('> li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapper.innerWidth() / singleWidth),
currentPage = 1,
pages = Math.ceil($items.length / visible);
if (($items.length % visible) != 0) {
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); // reselect
$wrapper.scrollLeft(singleWidth * visible);
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page == 0) {
$wrapper.scrollLeft(singleWidth * visible * pages);
page = pages;
} else if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
// reset back to start position
page = 1;
}
currentPage = page;
});
return false;
}
$wrapper.after('<a class="arrow back"><</a><a class="arrow forward">></a>');
$('a.back', this).click(function () {
return gotoPage(currentPage - 1);
});
$('a.forward', this).click(function () {
return gotoPage(currentPage + 1);
});
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
});
};
//Carousel 2
$('.infiniteCarouselTwo').infiniteCarouselTwo();
$.fn.infiniteCarouselTwo = function () {
function repeat(str, num) {
return new Array( num + 1 ).join( str );
}
return this.each(function () {
var $wrapperTwo = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapperTwo.find('> ul'),
$items = $slider.find('> li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapperTwo.innerWidth() / singleWidth),
currentPage = 1,
pages = Math.ceil($items.length / visible);
if (($items.length % visible) != 0) {
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); // reselect
$wrapperTwo.scrollLeft(singleWidth * visible);
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapperTwo.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page == 0) {
$wrapperTwo.scrollLeft(singleWidth * visible * pages);
page = pages;
} else if (page > pages) {
$wrapperTwo.scrollLeft(singleWidth * visible);
// reset back to start position
page = 1;
}
currentPage = page;
});
return false;
}
$wrapperTwo.after('<a class="arrow back"><</a><a class="arrow forward">></a>');
$('a.back', this).click(function () {
return gotoPage(currentPage - 1);
});
$('a.forward', this).click(function () {
return gotoPage(currentPage + 1);
});
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
});
};
Here is the CSS: Code: .infiniteCarousel {
width: 395px;
position: relative;
}
.infiniteCarousel .wrapper {
width: 825px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
overflow: auto;
min-height: 10em;
position: absolute;
top: 0;
margin-top: 0;
margin-right: 40px;
margin-bottom: 0;
margin-left: 40px;
left: 20px;
}
.infiniteCarousel ul a img {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.infiniteCarousel .wrapper ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
.infiniteCarousel ul.thumb li {
display:block;
float:left;
padding: 10px;
height: 85px;
width: 85px;
-ms-interpolation-mode: bicubic;
}
.infiniteCarousel ul.thumb li a img {
display:block;
}
.infiniteCarousel .arrow {
display: block;
height: 36px;
width: 37px;
text-indent: -999px;
position: absolute;
top: 25px;
cursor: pointer;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.infiniteCarousel .forward {
background-position: 0 0;
right: 0;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
left: 910px;
}
.infiniteCarousel .back {
background-position: 0 0px;
left: 0;
background-image: url(../images/arrow-back.png);
background-repeat: no-repeat;
}
.infiniteCarousel .forward:hover {
background-position: 0 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
}
.infiniteCarousel .back:hover {
background-position: 0 0px;
background-image: url(../images/arrow-back.png);
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
}
/* Carousel Two */
.infiniteCarouselTwo {
width: 395px;
position: relative;
}
.infiniteCarouselTwo .wrapperTwo {
width: 825px; /* .infiniteCarouselTwo width - (.wrapperTwo margin-left + .wrapperTwo margin-right) */
overflow: auto;
min-height: 10em;
position: absolute;
top: 0;
margin-top: 0;
margin-right: 40px;
margin-bottom: 0;
margin-left: 40px;
left: 20px;
}
.infiniteCarouselTwo ul a img {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.infiniteCarouselTwo .wrapperTwo ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
.infiniteCarouselTwo ul.thumbTwo li {
display:block;
float:left;
padding: 10px;
height: 85px;
width: 85px;
-ms-interpolation-mode: bicubic;
}
.infiniteCarouselTwo ul.thumbTwo li a img {
display:block;
}
.infiniteCarouselTwo .arrow {
display: block;
height: 36px;
width: 37px;
text-indent: -999px;
position: absolute;
top: 25px;
cursor: pointer;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.infiniteCarouselTwo .forward {
background-position: 0 0;
right: 0;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
left: 910px;
}
.infiniteCarouselTwo .back {
background-position: 0 0px;
left: 0;
background-image: url(../images/arrow-back.png);
background-repeat: no-repeat;
}
.infiniteCarouselTwo .forward:hover {
background-position: 0 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
}
.infiniteCarouselTwo .back:hover {
background-position: 0 0px;
background-image: url(../images/arrow-back.png);
}
ul.thumbTwo li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_viewTwo {
}
Here is the HTML: Code: <div id="around" class="CollapsiblePanel">
<div class="CollapsiblePanelTabBlue" tabindex="1">Around town</div>
<div class="CollapsiblePanelContent">
<div id="main_viewTwo"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
<!-- Start Carousel -->
<div class="infiniteCarouselTwo">
<div class="wrapperTwo">
<ul class="thumbTwo">
<li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
<li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
<li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
<li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
<li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
<li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
<li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
<li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
<li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
<li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
<li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
<li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
<li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
<li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
<li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
<li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
</ul>
</div>
</div>
<!--End Carousel-->
</div>
</div>
<div id="campus" class="CollapsiblePanel">
<div class="CollapsiblePanelTabGreen" tabindex="1">Campus life</div>
<div class="CollapsiblePanelContent">
<div id="main_view"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
<!-- Start Carousel -->
<div class="infiniteCarousel">
<div class="wrapper">
<ul class="thumb">
<li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
<li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
<li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
<li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
<li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
<li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
<li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
<li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
<li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
<li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
<li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
<li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
<li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
<li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
<li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
<li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
</ul>
</div>
</div>
<!--End Carousel-->
</div>
</div>
Ask me if you need any more information from me. Like I said if you need to see the page message me! It is not a site I want to make too public at the moment for some reasons of who I work for. Similar TutorialsSo, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
I'm using a horizontal coda slider for nav and an image viewer (ceebox)....all jquery. I am trying to incorporate a lava lamp (also jquery) effect on the navigation. I can either get the viewer/slider to work (but lavaLamp doesn't) or the reverse......can't get them all. I've tried everything and have the issue narrowed down to the "easing" jquery plugin. With it lava lamp works but the rest doesn't and w/o it lava doesn't. Has anyone had this issue....anyone know how to resolve it? http://seeyatom.com/ on my site he http://www.jbiddulph.com/niche/ I would like to apply an opacity on my navigation roll over, can someone help me here?! here is the code for my Home link: Code:
$('#nav ul li.home').hover(
function() {
$(this).stop().animate({backgroundColor:'#ff8300'}, 1300);
}, function () {
$(this).stop().animate({backgroundColor:'#666666'}, 100);
});
It does not work in ie7! Here is my code and my link... I have been trying to fix for 2 hours now! Please help. I tried using jquery 1.6.1, 1.5.2, min.validation, regular validation, i changed the buttons to input type="submit" and did everything else I could find but nothing works. When you click submit, it does not validate. It goes straight to my thank you page and I get a blank form in return. I do not know much jquery, just enough to know what I copy and paste and make some minimal changes. Thanks! http://www.denver-website-designer.com/quote.html <script type="text/javascript"> $().ready(function() { var erroralert = $("#quoteForm").bind("invalid-form.validate", function() { $("#erroralert"); }); }); $.metadata.setType("attr", "validate"); $.validator.addMethod("ninja", function(value) { return value == "ninja"; }, 'Can a robot spell "ninja"'); $().ready(function() { $("#quoteForm").validate({ errorContainer: $("#erroralert"), rules: { fullname: { required:true, minlength:2, }, email: { required:true, email:true, }, phone: { required:true, minlength:10, maxlength:15, }, pages: { required:true, minlength:1, maxlength:10, number:true }, whyrate: { required:true, minlength:10, }, ninja: "ninja", }, messages: { email: "Please enter a valid email address", pages: "Numeric values only", } }); }); </script> 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 did have this in another category but i think it was the wrong one, so i am now posting it here i found this script which ran great for the new year. I have been trying to change it so it counted down from todays date to a new date in the future instead of from a date picked to the new year. I have the code here, how would i go about doing this. jquery script Code:
(function($){
// Number of seconds in every time division
var days = 24*60*60,
hours = 60*60,
minutes = 60;
// Creating the plugin
$.fn.countdown = function(prop){
var options = $.extend({
callback : function(){},
timestamp : 0
},prop);
var left, d, h, m, s, positions;
// Initialize the plugin
init(this, options);
positions = this.find('.position');
(function tick(){
// Time left
left = Math.floor((options.timestamp - (new Date())) / 1000);
if(left < 0){
left = 0;
}
// Number of days left
d = Math.floor(left / days);
updateDuo(0, 1, d);
left -= d*days;
// Number of hours left
h = Math.floor(left / hours);
updateDuo(2, 3, h);
left -= h*hours;
// Number of minutes left
m = Math.floor(left / minutes);
updateDuo(4, 5, m);
left -= m*minutes;
// Number of seconds left
s = left;
updateDuo(6, 7, s);
// Calling an optional user supplied callback
options.callback(d, h, m, s);
// Scheduling another call of this function in 1s
setTimeout(tick, 1000);
})();
// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}
return this;
};
function init(elem, options){
elem.addClass('countdownHolder');
// Creating the markup inside the container
$.each(['Days','Hours','Minutes','Seconds'],function(i){
$('<span class="count'+this+'">').html(
'<span class="position">\
<span class="digit static">0</span>\
</span>\
<span class="position">\
<span class="digit static">0</span>\
</span>'
).appendTo(elem);
if(this!="Seconds"){
elem.append('<span class="countDiv countDiv'+i+'"></span>');
}
});
}
// Creates an animated transition between the two numbers
function switchDigit(position,number){
var digit = position.find('.digit')
if(digit.is(':animated')){
return false;
}
if(position.data('digit') == number){
// We are already showing this number
return false;
}
position.data('digit', number);
var replacement = $('<span>',{
'class':'digit',
css:{
top:'-2.1em',
opacity:0
},
html:number
});
// The .static class is added when the animation
// completes. This makes it run smoother.
digit
.before(replacement)
.removeClass('static')
.animate({top:'2.5em',opacity:0},'fast',function(){
digit.remove();
})
replacement
.delay(100)
.animate({top:0,opacity:1},'fast',function(){
replacement.addClass('static');
});
}
})(jQuery);
The section that inilialises it: Code: $(function(){
var note = $('#note'),
ts = new Date(2012, 0, 1),
newYear = true;
if((new Date()) > ts){
// The new year is here! Count towards something else.
// Notice the *1000 at the end - time must be in milliseconds
ts = (new Date()).getTime() + 10*24*60*60*1000;
newYear = false;
}
$('#countdown').countdown({
timestamp : ts,
callback : function(days, hours, minutes, seconds){
var message = "";
message += days + " day" + ( days==1 ? '':'s' ) + ", ";
message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";
if(newYear){
message += "left until the new year!";
}
else {
message += "left to 10 days from now!";
}
note.html(message);
}
});
});
ive tried making the ts = new Date(2012, 0, 1) like ts = new Date() so it reads today's date and i also tried making timestamp : 0 a date in the future as that is basically what i thought was happening. I have tried a load more stuff but i seam to be making a mess of the code and it does not work after that. Could someone point me in the right direction on where to start and which variables are important within this script. Hello! So I came across this Featured Content Slider mod (http://css-tricks.com/creating-a-sli...ontent-slider/) which is based on the Coda Slider (http://www.ndoherty.biz/demos-index/) which uses jQuery. However, you'll notice that the Coda Slider has since received an update (2.0). What I'm trying to do is update the mod for the Coda Slider update, which I'll then use to create a WordPress plugin for my site. Thing is, I don't really know JavaScript (only enough to logic my way through simply stuff). A lot of things seemed to have changed in the Coda update, but I can't seem to get things to work properly in the FCS, specifically being able to click a thumbnail and make the slider switch to that one. I'm pretty sure I've ruled out CSS being an issue, leaving the JavaScipt. If anyone's willing to take a look, I've uploaded what I currently have to http://www.thetanooki.com/coda.zip It's a bit rough at the moment, since I'm pretty much using trial and error to figure things out... and don't mind the seemingly useless PHP code at the top of the .js.php file - that's just an example I'm hoping to use for when I eventually make a WordPress plugin out of it. Anyway, index2.html is the one I'm working on, I'm only using index.html (original) as a guide, and the original FCS as well as old version of Coda can be found at the other links above. Thanks in advance; any light that can be shed on this would be a tremendous help! If I've screwed something else up, let me know - I may have overlooked conflicting class names or something like that since the originals aren't my own code and I'm still familiarizing myself. Hi all, I am looking for a script that I can only describe. Often, in facebook, when a new window opens there is only the first few lines of text visible followed by a few dots with an invitation to "read more". Once clicked the additional text expands and becomes visible. I don't even know what this behavior is called so it's hard to get started. Any help or pointers in the right direction will be much appreciated. Anita. Cape Town. does anyone know if there is a jquery image gallery/slider plugin that can be used multiple time on one page?
hi Pals, I have a problem regarding the "target" attribute of "a" tag. in my code I use biggerlink jQuery script to give link to p element without come HTML validation problem. I pass the "target" value from PHP to smarty template , but it's not working , When I remove "biggerlink " it works but the link in <p> tag not working . My Tpl file is : Code: {if not empty($campaign)}
<div class="securti-adv biggerlink">
{if not empty ($campaign.media)}
<a href="{$campaign.url}" {if n($campaign.linkTarget)}target="{$campaign.linkTarget}"{/if} class="thumb">
<img src="{$campaign.image}" title="{$campaign.title1 + $campaign.title2}" alt="{$campaign.title1 + $campaign.title2}" /> </a>
{/if}
<div class="details">
{if not empty ($campaign.title1) || not empty ($campaign.sub_title)}
<a href="{$campaign.url}" {if not empty($campaign.linkTarget)}target="{$campaign.linkTarget}"{/if} title="{$campaign.title1 + $campaign.title2}">
{text2image styleSlug=$campaign.titleStyle1 text=$campaign.title1}
{text2image styleSlug=$campaign.titleStyle2 text=$campaign.title2}
<span><img src="{$imagesDir}/btn-campaign-meet-security-advisor.png" alt="" title="" /></span>
</a>
<p> {text2image styleSlug=$campaign.subtitleStyle text=$campaign.subTitle}</p>
{/if}
</div>
</div>
<script type="text/javascript" language="javascript">
{literal}
$(document).ready(function(){
$('.biggerlink').biggerlink();
});
{/literal}
</script>
{/if}
My plugin code is : Code: (function($) {
$.fn.biggerlink = function(options) {
// Default settings
var settings = {
hoverclass:'hover', // class added to parent element on hover
clickableclass:'hot', // class added to parent element with behaviour
follow: true // follow link? Set to false for js popups
};
if(options) {
$.extend(settings, options);
}
$(this).filter(function(){
return $('a',this).length > 0;
}).addClass(settings.clickableclass).each(function(i){
// Add title of first link with title to parent
$(this).attr('title', $('a[title]:first',this).attr('title'));
// hover and trigger contained anchor event on click
$(this)
.mouseover(function(){
window.status = $('a:first',this).attr('href');
$(this).addClass(settings.hoverclass);
})
.mouseout(function(){
window.status = '';
$(this).removeClass(settings.hoverclass);
})
.bind('click',function(){
$(this).find('a:first').trigger('click');
})
// triggerable events on anchor itself
.find('a').bind('focus',function(){
$(this).parents('.'+ settings.clickableclass).addClass(settings.hoverclass);
}).bind('blur',function(){
$(this).parents('.'+ settings.clickableclass).removeClass(settings.hoverclass);
}).end()
.find('a:first').bind('click',function(e){
if(settings.follow == true)
{
window.location = this.href;
}
e.stopPropagation(); // stop event bubbling to parent
}).end()
.find('a',this).not(':first').bind('click',function(){
$(this).parents('.'+ settings.clickableclass).find('a:first').trigger('click');
return false;
});
});
return this;
};
})(jQuery);
the value of "target" , "_blank" is not work .... I highlight the code part regarding this, please check and give me a solution ASAP. You can mail me at : anes.pa@gmail.com Thanks, Anes http://www.hellowallet.com The blue tabbed navigation that fills the page. Is that a jquery plugin or..? Hello, I posted this at another site, but am still at a loss so I hope I can get some help here I am at a complete loss with this plugin. And if after reading my post, someone can come up with a better, less frustrating plugin, I would really appreciate it. The plug-in author's site is: http://flesler.blogspot.com/2007/10/jqueryscrollto.html. The gist of it is that I am making a website for a restaurant. They want the menu to horizontally scroll between the sections of food, and within each section, have a vertically scrollable (via scroll bar) text menu in two columns. When you click on the section in the nav menu, it's supposed to take you to that food section via horizontal animated scroll. The link below is the sample page I'm testing on, and an image is attached to show you the idea of what it's supposed to look like: http://www.bqcreative.com/gcc2/menu.html That is the sample page with the JQuery.ScrollTo plugin installed. When I shrink the page, it looks like the animation *is* working (by the window scroll bars moving), just not correctly, since it's not moving the divs. Image of what each food section should look like: Maybe this is a case of me not having the divs set up correctly with CSS? I'm not sure, I've dug myself into a messy hole... please help HTML (with irrelevant code removed): Code: <div class="menunav">
<ul>
<li><a href="#" onclick="$.scrollTo('#appetizers', 1500, {easing:'elasout'}, {axis:'x'});">Appetizers</a></li>
<li><a href="#" onclick="$.scrollTo('#skinnygreek', 1500, {easing:'elasout'}, {axis:'x'});">Skinny Greek</a></li>
<li><a href="#">Salads</a></li>
<li><a href="#">Sandwiches</a></li>
<li><a href="#">Wraps & Pitas</a></li>
<li><a href="#">Dinners</a></li>
<li><a href="#">Desserts</a></li>
</ul>
<br /><br /><br />
<hr />
</div>
<div class="menuwrap">
<div id="appetizers">
<div class="itemleft">
<p>Appetizer foods on the left</p>
</div>
<div class="itemright">
<p>Appetizer foods on the right</p>
</div>
</div>
<div id="skinnygreek">
<div class="itemleft">
<p>Skinny Greek foods on the left</p>
</div>
<div class="itemright">
<p>Skinny Greek foods on the right</p>
</div>
</div>
</div>
CSS: Code: .menunav {
width: 90%;
margin-top:35px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
.menunav ul {
list-style:none;
}
.menunav li {
display:block;
text-align:center;
float:left;
padding: 0 10px;
}
.menunav li a {
color: #2e6ab1;
text-decoration: none;
float:left;
font-family: 'DominicanRegular', sans-serif;
font-size:1.5em;
}
.menuwrap {
width: 721px;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
overflow-y:auto;
overflow-x:hidden;
position:relative;
}
#appetizers {
width: 721px;
float:left;
position:relative;
top:0px;
left:0px;
}
#skinnygreek {
width: 721px;
clear:left;
float:left;
position:relative;
top:0px;
left:800px;
}
.itemleft {
width:50%;
float:left;
}
.itemright {
width:50%;
float:right;
}
Javascript (in header section): Code: <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
<!--
jQuery(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});
// -->
</script>
Hi.. Anyone can help me to reslove tis.. How to detect iTune plugin in IE Browser...Am using navigator.plugins[] array..its working in firefox,chrome but i need for IE browser..pls help on tis very urgent.. I have managed to get a model to load and to load multiple models, however i cannot seem to work out how to get these models to move. I have seen it done so i know there is a way in which it can be done, any help would be much appreciated. Also if anyone knows how to create and load custom terrain and stuff thats something i'd like to klnow how to do. Hi can Javascript talk to the flash plugin to access the microphone functionality? if so how can i do this? Hello, I'm modifying a wordpress plugin to include a product manager module where administrators can input data into the fields and the shortcode will style it. Surprisingly enough, I have that part complete and working! The part I'm scratching my head over is how to get the "Add One More Item" link to work. It functions to the extent of adding a new set of fields but when I fill out the fields and submit, only the first set posts. It's all javascript and that is not my where my strengths lie. If any of you javascript ninjas would be willing to drop some knowledge, I would be greatly appreciative. I've attached the entire php file that the script is contained in and also a picture of the product manager module window with a label of the problem I'm having (for clarification). If you decide to try and help and have further questions, I am at your disposal. Thank you so much in advance! Is there any type of script or plugin out that has a secure, DropBox-like interface? I wanted clients to have a username and password, and that username and password to be tied to a mysql db of sorts that allows them access to their specific FTP space without them knowing the actual server info.
fly_earth_chung is a small free flight / car simulator i have written using google earth plugin and javascript. you can find it there => http://chungswebsite.blogspot.com/se...ly_earth_chung |
|||||||