This is a slideshow,and my problem is the pause button doesn't work and it doesn't pause the slideshow.It doesn't have any errors in firebug.The button changes to resume but doesn't pause the slideshow.
I will be really really thankfull for your help.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication4.WebForm6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript" src="cycle.js"></script>
<script style="text/javascript">
$(function () {
$('.slider img:gt(0)').hide();/*hides first 2th 3th pics*/
setInterval(function () {
$('.slider :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slider');
},
3000);
});
$(document).ready(function ($) {
$('#playbutton').click(function () {
$(this).css('margin-left', '-9999px');
$('#pausebutton').css('margin-left', 0);
});
$('#pausebutton').click(function () {
$(this).css('margin-left', '-9999px');
$('#playbutton').css('margin-left', 0);
});
});
$(document).ready(function ($) {$('#playbutton').click(function() {
$('#mg').cycle('resume');
}); });
$(document).ready(function ($) {$('#pausebutton').click(function() {
$('#mg').cycle('pause');
});
});
</script>
<style type="text/css">
.slider
{
position:fixed;
width:750px;
height:400px;
background-color:white;
top: 9px; left: 12px; z-index:-1;
background:transparent url(loading.gif) no-repeat 50% 50%;
}
.slider img {
border-style: none;
border-color: inherit;
border-width: medium;
position:fixed;
top: 42px;
left: 50px;
height: 220px;
width: 651px;
bottom: 267px;
}
#pausebutton {
left: 356px;
margin-left:0px;
position:absolute;
top: 273px;
height: 27px;
}
#playbutton {
left: 356px;
margin-left:0px;
position:absolute; top: 273px;
height: 27px;
}
</style>
</head>
<body >
<div class="slider" id="mg" >
<img src="slider-2.jpg" />
<img src="slider-3.jpg" />
<img src="slider-4.jpg" />
</div >
<img src="play.png" alt="play button" title="Play" />
<a href="#" id="pausebutton" ><img src="pause.png" alt="pause button" title="Pause" /></a>
</body>
</html>
I think you'll need to stop the default behaviour of the <a> tag as clicking it will cause your page to refresh.
$('#pausebutton').click(function(e) {
e.preventDefault();
$('#mg').cycle('pause');
});
I think your code has logic error because when firebug hasn't any errors it show your code has not any Syntax errors.try debugging your code by firebug or check again your code. other thing is testing your code in multiple browser most of the time java scripts code dos not work true in all browsers .
Related
Here is my code in which I am getting error while running the script.
My javascript i snot being executed.
I dont know why this error comes.
It is running perfectly on
http://jsfiddle.net/CriddleCraddle/Wj9dD/
Here is my same code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(window).scroll(function () {
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
</script>
<style type="text/css">
html, body {
height: 4000px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
#body_div {
top: 0;
position: relative;
height: 200px;
background-color: green;
}
#banner {
width: 100%;
height: 273px;
background-color: gray;
overflow: hidden;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
.nav_links {
margin: 0;
}
.nav_links li {
display: inline-block;
margin-top: 4px;
}
.nav_links li a {
padding: 0 15.5px;
color: #3498db;
text-decoration: none;
}
</style>
</head>
<body>
<div id="banner">
<h2>put what you want here</h2>
<p>just adjust javascript size to match this window</p>
</div>
<nav id='nav_bar'>
<ul class='nav_links'>
<li>Nav Bar</li>
<li>Sign In</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
<div id='body_div'>
<p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>
</body>
</html>
Looks like you are missing a reference to JQuery.
Add this (if you want to use the CDN)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
I get a 'Uncaught ReferenceError: $ is not defined' in console if I run it without.
I have developed a custom slider. I'm having only one image animation occur, and the other images are not displaying. How do I show the other images with an animation?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.Slider
{
width: 800px;
height: 350px;
overflow: hidden;
margin: 30px auto;
background-image:url(http://cdn.css-tricks.com/wp-content/uploads/2011/02/spinnnnnn.gif);
background-repeat: no-repeat;
background-position: center;
}
.Shadow
{
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSb6KDmhtvsBAzkpXLHcijTuE_gYERTMkx5xpkbUS0lwV8ByTFx);
background-repeat: no-repeat;
background-position: top;
width: 864px;
height: 144px;
margin: -60px auto;
}
.Slider img{
width: 800px;
height: 350px;
display: none;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider()
{
$(".Slider #1").show("fade",500);
$(".Slider #1").delay(5500).hide("slide",{direction:'left'},500);
}
var slderCount=$(".Slider img.").size();
var count=2;
setInterval(function()
{
$("Slider #"+count).show("slide",{direction:'left'},500);
$("Slider #"+count).delay(5500).hide("slide",{direction:'left'},500);
if(count==slderCount)
{
count=1;
}
else
{
count=count+1;
}
},6500);
</script>
</head>
<body onload="Slider();">
<div class="Slider">
<img id="1" src="http://accessengsl.com/wp-content/files_mf/1.jpg" border="0" alt="Helping develop"/>
<img id="2" src="http://accessengsl.com/wp-content/files_mf/trincokanthaleroad.jpg" border="0" alt="Helping concrete" />
<img id="3" src="http://accessengsl.com/wp-content/files_mf/08_new.jpg" border="0" alt="no develop" />
</div>
<div class="Shadow"> </div>
</body>
</html>
Change var slderCount=$(".Slider img.").size(); to
var slderCount=$(".Slider img").length;
Your slider count selector is wrong:
var slderCount=$(".Slider img.").size();
Should be:
var slderCount = $(".Slider").find("img").length;
But honestly, you are just reinventing the wheel. Use tinycarousel or any other slider plugin.
Trym
setInterval(function()
{
$(".Slider #"+count).show("slide",{direction:'left'},500);
$(".Slider #"+count).delay(5500).hide("slide",{direction:'left'},500);
if(count==slderCount)
{
count=1;
}
else
{
count=count+1;
}
},6500);
My code works perfectly with all browsers except IE. I tried every solution I could find on the forums with no luck. I am still learning JavaScript, so I will learn jQuery later. The issue is that in IE the slides appear vertically with no effect. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet...css" rel="stylesheet" type="text/css" />
<title>div test</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var slider = $('#slider1').bxSlider({
controls: false
});
$('#bx-prev').click(function () {
slider.goToPreviousSlide();
return false;
});
$('#bx-next').click(function () {
slider.goToNextSlide();
return false;
});
});
</script>
</head>
<body>
<div id="slider1">
<div>
<div id="wrapper">
<div id="head"><img alt="logo" align="left" src="logo.png"/></div>
<div id="main"> <div id="content">content</div> </div>
<div id="rash"><img alt="r" align="middle"
style="position:relative;top:-70px;"
src="image1.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div>
<div id="wrapper">
<div id="head"><img alt="logo" align="left" src="logo.png"/></div>
<div id="main"> <div id="content">content</div> </div>
<div id="rash"><img alt="r" align="middle"
style="position:relative;top:-70px;"
src="image1.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div>page3</div>
<div>page4</div>
</div>
<div id="bx-next">next</div>
<div id="bx-prev">prev</div>
</body>
</html>
And here is my style sheet:
div#head {
width:100%;
height:100px;
/*background-color:antiquewhite;*/
margin-bottom:100px;
}
div#content {
border-left: 2px solid #F0F8FF;
border-right: 2px solid #8a815d;
border-top: 2px solid #8a815d;
border-bottom: 2px solid #8a815d;
width:400px;
height:300px;
-webkit-border-radius: 0px 28px 20px 0px;
-moz-border-radius: 0px 28px 20px 0px;
border-radius: 0px 28px 20px 0px;
font-family:Arial,Helvetica,sans-serif;
color:#8a815d;
padding-left:100px;
background-color:#F0FFFF;
background-color: rgba(215,227,211,0.3);
position:relative;
top:20px;
left:0px
}
div#wrapper {
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}
div#main {
/* background-color:black;*/
width:50%;
height:360px;
float:left;
}
div#rash {
float:right;
/*background-color:blue;*/
height:360px;
width:50%;
}
body {
background-color: #E8F3F9;
background-image: url('squares layer.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
/*next button*/
#bx-next {
position:absolute;
top:45%;
right:3px;
z-index:998;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(gray_next.png) no-repeat 0 -30px;
}
/*previous button*/
#bx-prev {
position:absolute;
top:45%;
left:4px;
z-index:998;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(gray_prev.png) no-repeat 0 -30px;
}
I am also having a similar problem, and I have not yet come to the conclusion but from what I have figured out so far is that to debug this problem you should start out by validating your code. http://validator.w3.org/ I copied your code and it said you had 5 errors so I think a start would be fixing these errors because IE is very picky and if you have any errors if could effect your formatting. Also I know that IE is picky about the Doc Type at the top of your code and if it is not correct it can also effect the formatting of the page. If I can get my similar problem fixed I will let you know because it is most likely the same problem you are having.
<div id="wrapper"> is defined twice. An ID needs to be unique for every element on your page. Same goes for <div id="head">, <div id="main">, <div id="content"> and <div id="rash">.
Also, have you tried debugging it in the IE console? Try and see if the console logs any errors at runtime. Then get back to SO and post those errors.
Cheers.
I have used multiple jQuery in my page. Two of them are working fine.When I tried to integrate the galleria script, it says,
Error: $("ul.gallery_demo").galleria is not a function
The code is working for me separately. Here's the code.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/galleria.css" rel="stylesheet" type="text/css" media="screen">
<!--script type="text/javascript" src="js/jquery.min.js"></script-->
<script type="text/javascript" src="js/jquery.galleria.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.gallery_demo_unstyled').addClass('gallery_demo');
$('ul.gallery_demo').galleria({
history : true,
clickNext : true,
insert : '#main_image',
onImage : function(image,caption,thumb) {
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);
var _li = thumb.parents('li');
_li.siblings().children('img.selected').fadeTo(500,0.3);
thumb.fadeTo('fast',1).addClass('selected');
},
onThumb : function(thumb) {
var _li = thumb.parents('li');
var _fadeTo = _li.is('.active') ? '1' : '0.3';
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); }
)
}
});
});
</script>
<style type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0; }
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
/*a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}*/
a{color:#FFFFFF;text-decoration:none;outline:none;}
a:hover{color:#CCCCCC;}
.caption{color:#FFFFFF; font-weight:bold; width:700px; height:30px; float:left; padding-top:8px; clear:both; }
.demo{margin-top:2em; }
.gallery_demo{width:720px; float:left; padding-left:5px; }
/*.gallery_demo li{width:100px;height:100px;border:3px double #111; float:left;}*/
.gallery_demo li{width:100px;height:100px;border:3px double #eaeaea; float:left;}
.gallery_demo li div{left:0px;}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif; }
#main_image{height:480px;width:700px; float:left; }
#main_image img{ border:5px solid #666666; width:700px; height:438px; }
/*#nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}*/
#nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;color:#FFFFFF;}
.info{text-align:left;width:500px;margin:0px auto;border-top:1px dotted #221;}
.info p{margin-top:1.6em;}
</style>
</head>
<body>
<br>
<div style="float: left; padding-left: 40px; width: 720px;">
<div>
<p id="nav" align="center">« previous | next »</p>
</div>
<div class="demo">
<div id="main_image" align="center"></div>
<div style="width: 700px; float: left;">
<ul class="gallery_demo_unstyled gallery_demo galleria">
<li class="active"><img rel="images/image1.jpg" class="thumb selected" style="width: auto; height: 100px; margin-left: -17px; opacity: 1; display: inline;" src="images/image1.jpg" alt="SEAT COMFORTS" title="SEAT COMFORTS"></li>
<li class=""><img rel="images/image2.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image2.jpg" alt="BUS INNER VIEW" title="BUS INNER VIEW"></li>
<li class=""><img rel="gallery/image3.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image3.jpg" alt="Bus full View" title="Bus full View"></li>
<li class=""><img rel="images/image4.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image4.jpg" alt="BEGINNING" title="BEGINNING OF TIME"></li>
<li class=""><img rel="gallery/image5.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image5.jpg" alt="ECO" title="ECO AWARENESS"></li>
</ul>
</div>
</div>
<br><br>
</div>
<!--content_inner div ends here-->
<!--- body -->
</body>
</html>
When I tried to integrate it in a page it is not working which also consists of the following code.
Code:
<script type="text/javascript" src="gallery/jquery.js"></script>
<script type="text/javascript" src="gallery/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="gallery/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="gallery/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript" src="show.js"></script>
<!--[if IE]>
<script type="text/javascript">
$().ready(function() {
$(".jimgMenu ul").kwicks({max: 400, duration: 700, easing: "easeOutQuad"});
});
</script>
<![endif]-->
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 475, duration: 600, easing: 'easeOutQuad'});
});
</script>
I have tried using noconflict() function and used jQuery instead of $ but no use.
Could anyone be able to solve this pls.
Regards,
Rekha
Looks like you've commented out the <script> element that should be bring in jQuery, this:
<!--script type="text/javascript" src="js/jquery.min.js"></script-->
should be this:
<script type="text/javascript" src="js/jquery.min.js"></script>
You need jQuery loaded before jquery.galleria.js or it won't work.
Your second example includes jquery.js but not jquery.galleria.js so try adding this to the second one:
<script type="text/javascript" src="js/jquery.galleria.js"></script>
You'll have to adjust the src path to point to your jquery.galleria.js of course.
Have you included the plugin? I think you're missing that... It's not jQuery's core functionality.
this is it I think:
http://galleria.aino.se/
instead of $('ul.gallery_demo').galleria, try using jQuery('ul.gallery_demo').galleria.
If this works, it means that $ variable has been overridden by someone else. Try finding that out or put your document.ready function a closure:
(function($){
(document).ready(function(){
// your code here
});
})(jQuery)
Here is my piece of code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Shout!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var status=1;
function action() {
if(status==1) {
$("#Layer1").hide("slow");
$("#Layer3").hide("fast");
$("#Layer4").hide("slow");
$("#close").attr("src","open.jpg");
status=0;
}
else if(status==0) {
status=1;
$("#Layer1").show("slow");
$("#Layer3").show("fast");
$("#Layer4").show("slow");
$("#close").attr("src","close.jpg");
}
}
function sendline() {
$("#msg").val(" ");
}
function type() {
var text=$("#msg").val();
$("#Layer6").html(text);
}
</script>
<style type="text/css">
<!--
body {
background-color: #000000;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 179px;
top: 3px;
}
#Layer2 {
position:absolute;
width:69px;
height:64px;
z-index:2;
left: 570px;
top: 543px;
}
#Layer3 {
position:absolute;
width:124px;
height:22px;
z-index:3;
left: 473px;
top: 474px;
}
.style1 {
color: #FFFFFF;
font-family: "Segoe UI";
font-weight: bold;
}
#Layer4 {
position:absolute;
width:72px;
height:27px;
z-index:4;
left: 744px;
top: 485px;
}
#Layer5 {
position:absolute;
width:274px;
height:70px;
z-index:5;
left: 422px;
top: 62px;
}
#Layer6 {
position:absolute;
width:638px;
height:356px;
z-index:5;
left: 272px;
top: 105px;
}
-->
</style></head>
<body>
<div class="style1" id="Layer3">
<textarea id="msg" style="height:50px;width:250px" rows="10" cols="80" onkeyup="type()"></textarea></div>
<div id="Layer1">Hello World!<img src="body.jpg" alt="Shout !" width="842" height="554" /></div>
<div id="Layer2"><img src="close.jpg" id="close" width="63" height="64" OnClick="action()"/></div>
<div id="Layer4">
<input type="button" value="Send Line" onclick="sendline()" /></div>
<div id="Layer6" style="color:#FFFFFF;"></div>
</body>
</html>
I'm facing a problem with the type() function.Its simply not running
Any advice on how to get it rnnning?
Thanks!
Your function is running, however it's throwing an error because of the function name:
Uncaught TypeError: string is not a function
or in Firefox:
type is not a function
In short, you can't use type as a function name here, you just need to give it a slightly different name, for exampled typed.
Here's your code only changing the function name, working :)
Rename your type function to something else (try somethingElseThanType just to test), and it should work