|
JavaScript - Jcarousellite: Fadeout First Item Before Scrolling
Hi Guys,
I'm using jcarousellite to show my newsitems in a vertical carousel. http://www.gmarwaha.com/jquery/jcarousellite/ The carousel itself works perfectly, now I'm trying to add that before the news scrolls upwards the top news-item fades-out first. Now it is fading out the complete list and I simply can't seem to figure out how to 'talk' to the 'active/top' <li> in the list. Can someone give me a hint? Thanks in advance, Marcel -- Code Below -- Code: $(function() {
$(".widgetCarousel").jCarouselLite({
circular: true,
vertical: true,
visible: 3,
scroll: 1,
start: 1,
auto: 500,
speed: 1000,
beforeStart: function(a) {
$(a).parent().fadeTo(100, 0);
},
afterEnd: function(a) {
$(a).parent().fadeTo(100, 1);
}
});
});
<div class="widgetCarousel">
<ul>
<li>My very own news item</li>
<li>My very own news item</li>
<li>My very own news item</li>
<li>My very own news item</li>
<li>My very own news item</li>
<li>My very own news item</li>
</ul>
</div>
Similar TutorialsSo I have the jcarousel with pagination working fine. So Im happy with all of the behavior that is going on right now, it is great. My issue is I would liek to have the pagination numbers still change the class on the slide changes, But my one thing is, I want to make the pagination numbers NOT links. So they keep the same hover states and the color changes on slide change, but only the slide carousel arrows can change the slides, and the pagination is only for notification purposes. not links or able to change slides. Can this be done? my code is here http://www.cesariomendoza.com/jcarousel/
Hi, first off I am very green when it comes to this stuff, so it needs to be spelled out for me. First, I was using colorbox on one page for an image gallery, and that works fine. On a different page, I have jcarousellite, which works fine as well. If only I could mix them both on the same page. I couldn't figure that out, so what I did was create a new page each time I clicked a jcarousel image. It opens up a completely different page, but I styled it in such a way that it at least "mimics" how it might look if I were using a lightbox script. So my solution works fine for now EXCEPT that once I close the new page (that mimics lightbox) the jcarousellite slides revert back to starting position. I need the slides to stay at the last clicked position, and not go back to the beginning each time I refresh the page. I searched online and saw some people talk about an "afterEnd" callback, but this is where my ability stops. If anyone could help me here it would be fantastic. Here is my code: Code:
$(document).ready(function() {
$(".slider").jCarouselLite({
speed: 100,
visible: 4,
btnPrev: ".previous",
btnNext: ".next",
circular: true
});
});
I want to have multiple instances of jcarousellite on the same page, but as you can see, they both scroll together. I am javascript brain dead, so any help would be appreciated, even if it's something obvious. http://goo.gl/vMLPA I found the following guide, but I need my hand held. http://myintarweb.com/dispatch/multiple-jcarouselite howdy, my site is www.site-tonight.com and on the homepage i have a jcarouselLite that came with the wordpress template that im using. I cannot get it to display more then 3 images, even if i put another <li> item in there. I've copied and pasted the last image 2-3 times over and it won't display. I've also tried changing it to a new image and putting it at the end and it still won't display. I have scoured the internet and spent a lot of time trying to figure this out and it's stumping me, so help is muchhhhhh appreciated. any suggestions for a newbie? Hi Peers, i have a Drop down list with 10 choices (skillset). users must choose one skillset and the corresponding level (beginer/intermediate/master). ( they have to do this 10 times for all the sillsets) what i want is : 1 - i need to show up only one record (dropdowanlist) with level then have a button to add new skill and level if required 2- then when they choose the 1st skill from the dropdown , this one will not show up on the 2nd choice dropdown. is it possible any help ? thanks guys Hello, I'm looking for help as I have the jCarouselLite feature functioning on my website and am looking for a way of displaying another image to the right of the carousel, dependent upon which image is visible in the carousel. I toyed with the idea of implementing another snippet of JavaScript to swap the text to the right and manually synching the swap time wise, but quickly abandoned this idea for a number of reasons, particularly as the carousely has buttons to scroll through the images displaying. I have to admit I'm not particularly great with JavaScript, but was thinking along the lines of another function that listens for the image that is displayed, but have no idea if am way off the mark, or even if this is the right track - no idea how to implement. Any help would be very gratefully recieved. Thanks, Matt Hello! On this project I'm working on, my client asked me, if I could make an item fade out after some time. I said I'll try my best, even though I have no idea about javascript. So if anyone could help me, that would be awesome. It's a div called "alert", that would disappear after ~15seconds, and wouldn't show back no mater how long the page is loaded. Thanks, Greg ////delete, thanks :) ////
I want it to fade out if the window is open then fade in... the fade in is working wonderfully but the fade out isn't doing a thing =[ and I get no errors =[ Code: var windowState = false;
action1 = document.getElementById("action1");
function requestWindow(url) {
if(windowState==false) {
windowOpen();
}
else if(windowState==true) {
windowClose();
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('action1').innerHTML=xmlhttp.responseText;
}
function windowOpen() {
windowState = true;
windowSize()
action1.style.display = "none";
$("#action1").fadeIn(1300);
clearMenu();
}
function windowClose() {
windowState = false;
action1.style.display = "inline";
$("#action1").fadeOut(1300);
clearMenu();
windowOpen();
}
I'm trying to create a jquery nav that will show up in place of the existing paragraph or div with a ul, then on the mouse out replace the existing paragraph. I'm not not too experienced with javascript, so I'm hoping it's just a simple and easy fix. This is what I have so far. I managed to get it to work, somewhat, but the paragraph shows up if you mouse off the main button over the ul. And for some reason it doesn't always show the menu on the mouse over, is picky about which ones it does. Code: $(document).ready(function(){
var showMenu = function ( el, menu, p )
{
var o = $(el).offset();
$(menu).clearQueue();
$(menu).css( { "left":o.left-122 + "px", "top":o.top+40 + "px", "z-index":100 } );
$(menu).stop().fadeIn(1);
$(menu).mouseover( function () {
$(this).clearQueue();
$(this).stop().fadeIn(1);
});
$(menu).mouseout( function () {
$(this).clearQueue();
$(this).stop().fadeOut(1);
});
$(el).bind( 'mouseout', {target:menu}, function(e) {
$(e.data.target).stop().fadeOut(1);
});
$(el).bind( 'mouseover', function() {
$(p).fadeOut(1);
});
$(el).bind( 'mouseout', function() {
$(p).fadeIn(1);
});
}
var n=0;
$(document).ready(function() {
$('a#learn').mouseover( function() { showMenu($(this),$('div.subnavlearn'),$('p.learn')); });
$('a#connect').mouseover( function() { showMenu($(this),$('div.subnavconnect'),$('p.connect')); });
$('a#act').mouseover( function() { showMenu($(this),$('div.subnavact'),$('p.act')); });
});
});
see it live he http://dev.joshuadnelson.com/clients/postgrowth/ Hi, I am looking for a script which could do picture animation like in this page But there is other problem: When you put your mouse on them, they appear colored. I need that this appearing action would take 5 seconds. 5 sek. to become colored, 5 sek. to become grey when you put away your mouse. If you need more info, ask.. Thanks a lot. Hi guys, Im trying to get the hover to fade in the 'hover.png' image and to fade out when leaving the 'hovering' item. The code I am using is the following Code: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
function mainmenu(){
$("#neon li.root").hover(function(){
$(this).fadeOut('500');
},function(){
$(this).fadeIn('500');
});
}
$(document).ready(function () {
mainmenu();
});
</script>
<style type="text/css">
/* remove the margin and bullets, set the padding and margin for this demo only*/
.neon {margin:50px auto 200px auto; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;}
/* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
.neon li {display:inline; float:left; background:url(hover.png);}
/* style the links and place the background image to start from left edge */
.neon li a {display:block; height:32px; float:left; background:url(menu.png); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;}
/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */
.neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(menu.png) right top; padding:0 40px 0 0; color:#fff;}
/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.neon li a:hover, .neon li a:hover b {border:0; background-image:url(hover.png); cursor:pointer; color:#000;}
.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(hover.png); color:#000; cursor:default;}
</style>
<ul id="neon" class="neon">
<li class="root"><a href="#nogo"><b>MENU ITEM1</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM2</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM3</b></a></li>
<li class="root"><a href="#nogo" class="current"><b>MENU ITEM4</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM5</b></a></li>
</ul>
Any help would be appreciated! Thanks! I am using fadein and out of jquery, but size of jquery file is high for me. so i should replace it do anyone know, how can i write fadein and fadeout functions? is anyone know its source code? Best Morteza How can I add fadeIn and fadeOut with a duration that I can set/adjust to this javascript? The site is using Zencart and the the Image Hover effect comes from the Image Handler 2 Add-on. Thank you in advance for your help. Your time and attention in helping me with this is greatly appreciated. Here is a link to the site residing on a subdomain I use to build sites on http://test3.fullspecweb.com I read the "Read Before Posting" and it said to only post the code you are having trouble with, but I have no idea which section that would be so I apologize for being such a noob Here is the script from the jscript_imagehover.js file... Code: var offsetfrommouse=[20,20]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400; // maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet
// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;
var vpos;
//Detect IE
var stIsIE = /*@cc_on!@*/false;
//detect opera
var isOpera =
window.opera?1:0;
// Detect Webkit browsers
var isWebKit =
navigator.userAgent.indexOf("AppleWebKit") > -1;
if (document.getElementById || document.all){
document.write('<div id="trailimageid">');
document.write('</div>');
}
function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
} else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
} else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function gettrail(){
return new getObj("trailimageid");
}
function truebody(){
if (isWebKit){
return document.body;
}else if (isOpera) {
return document.documentElement;
}else{
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
}
function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
zoomimg_w=zoomimgwidth;
zoomimg_h=zoomimgheight;
if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
trailobj = gettrail().obj;
trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
trailobj.style.height=(zoomimgheight+(2*padding))+"px";
trailobj.setAttribute("startx", startx);
trailobj.setAttribute("starty", starty);
trailobj.setAttribute("startw", startw);
trailobj.setAttribute("starth", starth);
trailobj.setAttribute("imagename", imagename);
trailobj.setAttribute("imgtitle", title);
document.onmousemove=followmouse;
}
function hidetrail(){
trailstyle = gettrail().style;
trailstyle.visibility = "hidden";
document.onmousemove = "";
trailstyle.left = "-2000px";
trailstyle.top = "-2000px";
}
function followmouse(e){
var xcoord=offsetfrommouse[0];
var ycoord=offsetfrommouse[1];
if (stIsIE){
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
}
else
{
var docwidth=pageXOffset+window.innerWidth-15;
var docheight=Math.min(window.innerHeight);
}
var relativeX = null;
var relativeY = null;
if (typeof e != "undefined"){
if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
relativeX = e.layerX;
relativeY = e.layerY;
} else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
// relativeX = e.x; // original code replaced to work with Opera
// relativeY = e.y; // original code replaced to work with Opera
relativeX = event.offsetX;
relativeY = event.offsetX;
}
if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
} else {
xcoord += e.pageX;
}
if (docheight - e.pageY < zoomimg_h + (2 * padding)){
ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
// returning different values for ff and (opera and webkit) - fixed 12th june 2010
} else {
ycoord += e.pageY;
}
} else if (typeof window.event != "undefined"){ // Seems to be IE
if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
relativeX = event.x;
relativeY = event.y;
} else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
relativeX = event.offsetX;
relativeY = event.offsetY;
}
if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
} else {
xcoord += truebody().scrollLeft+event.clientX;
}
/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
var ie_offset = -20;
if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
/*
ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
*/
ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
} else {
ycoord += ie_offset + truebody().scrollTop + event.clientY;
}
}
trail = gettrail();
startx = trail.obj.getAttribute("startx");
starty = trail.obj.getAttribute("starty");
startw = trail.obj.getAttribute("startw");
starth = trail.obj.getAttribute("starth");
imagename = trail.obj.getAttribute("imagename");
title = trail.obj.getAttribute("imgtitle");
// calculate and set position BEFORE switching to visible
if (stIsIE){
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
}else{
var docwidth=pageXOffset+window.innerWidth-15;
var docheight=Math.max(document.body.offsetHeight, window.innerHeight);
}
if(ycoord < 0) { ycoord = ycoord*-1; }
if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
trail.style.left=xcoord+"px";
trail.style.top=ycoord+"px";
if (trail.style.visibility != "visible") {
if (((relativeX == null) || (relativeY == null)) ||
((relativeX >= startx) && (relativeX <= (startx + startw))
&& (relativeY >= starty) && (relativeY <= (starty + starth)))){
newHTML = '<div><h1>' + title + '</h1>';
newHTML = newHTML + '<img src="' + imagename + '"></div>';
trail.obj.innerHTML = newHTML;
trail.style.visibility="visible";
}
}
}
Is it possible to have a form's textarea background image fadeout to an alternate bg image, when that textarea is selected (by clicking the textarea or tabbing to it)? I've never seen this done before, but I'd really like to do it..
I've got a <ul> w/ 6 <li> items and CSS to make them 104x228 side blocks, which hold 2 images, one on top of the other. The 6 rows of images look like this: X X X X X X X X X X This is what I want: The top row of images to be opacity:0 (or hidden), and then when you mouseover the bottom images, the top images come to 100 opacity. When you mouseout, the opacity is back to 0. Here's the HTML and CSS: Code: <ul class="carz"> <li><img src="img/impreza2.jpg" class="imgtophidden"/><img src="img/impreza.jpg" /></li> <li><img src="img/wrx.jpg" class="imgtophidden"/><img src="img/wrx.jpg" /></li> <li><img src="img/legacy2.jpg" class="imgtophidden"/><img src="img/legacy.jpg" />/li> <li><img src="img/outback2.jpg" class="imgtophidden"/><img src="img/outback.jpg" /></li> <li><img src="img/forester2.jpg" class="imgtophidden"/><img src="img/forester.jpg" /></li> <li><img src="img/tribeca2.jpg" class="imgtophidden"/><img src="img/tribeca.jpg" /></li> </ul> The classes are like so: Code: .imgtophidden {
opacity: 0;
}
.imgtop {
opacity: 100;
}
I am new to jQuery coding (but loving learning) and I want to figure out: how do I make this in jQuery? Here's what I have so far: Code: $(function() {
$("ul.carz li").hover(function() {
$(this).find('img.imgtophidden').addClass('imgtop')
} , function() {
$(this).find('img.imgtop').addClass('imgtophidden')
});
});
I'm trying to delete a item in a list. I'm getting a method not allowed error in IE8. Code: var selectOptions = document.getElementById('id_employees_cbo');
for (var i=0; i<selectOptions.options.length; i++)
{
if (selectOptions.options[i].selected == true)
{
selectOptions.options[i].remove();
break;
}
}
Is there another way to do this? Thanks hai friends <script type="text/javascript"> function myfunction(x) { var xname = x.name; alert("gender - " +xname); } </script> </head> <body> <form action="index.php" method="post" name="frm2" id="frm2"> <input type="checkbox" name="male" onclick="myfunction(this)" /> male <input type="checkbox" name="female" onclick="myfunction(this)" /> female </form> when i use this code only check box which is selected will alerts me . i want all checkboxes names which are selected as alert plz help me This function is part of a page that will delete a product that a customer has selected. The question I have is what is the line line that actually removes the item from the list of products chosen? From my understanding, in order to establish an array, new array = elements[i] has to be added but Im thinking that elements[i] is the array that holds the product. Does the "0" in this line actually delete the item? document.template.elements[i].value = 0 ; Code: function del_item(X,msg) {
// var msg = "Are you sure you want to delete this line item?"
resp = confirm("Are you sure you want to " + msg + "?") ;
if (resp) {
var len = document.template.elements.length
//loop to put into arrays
for (var i = 0; i < len; i++) {
var lname = document.template.elements[i].name ;
if(lname == X) {
document.template.elements[i].value = 0 ;
process_order(0) ;
document.template.loginpath.value = "CO" ;
document.template.submit() ;
}
}
} else {
return ;
}
}
Hello everyone. This a css code in <head>: Code: .pagination{
width: 530px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: white;
padding: 5px 10px;
}
.pagination a{
padding: 0px 5px;
text-decoration: none;
color: #410B38;
font-weight:bold;
font-family:Arial;
background: white;
}
.pagination a:hover, .pagination a.selected{
color: white;
text-decoration: none;
font-weight:bold;
font-family:Arial;
background-color: #410B38;
}
for a div with class=pagination (below) which contains the pagination of mysql data display: Code: <div class="pagination">
<?php
$sql = "SELECT COUNT(id) FROM tablename";
$rs_result = mysql_query($sql,$mysql_connection);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / 5);
for ($i=1; $i<=$total_pages; $i++) {
echo "<a href='mysqldatadisplay.php?page=".$i."'>".$i."</a>";
};
?>
</div>
I want everytime someone clicks on another number in order to change page, that clicked number to have different style than the other numbers as long as one stays on that page and when one clicks on a different number I want that number to behave in the same way. Someting like highlighting the navigational item that you're on. Thank you very much in advance! |
|||||||