This a code that uses jquery marquee function.This code for works perfectly well in IE and mozilla firefox but it is not working in chrome.So plz tell me how to fix this problem.
<html>
<head>
<title>scroll</title>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.marquee.js"></script>
</head>
<body>
<div id="main" style="width:99%;min-height:100px;">
<img src="street cartoon.jpg">
</div>
<div id="scroll" style="width:99%;min-height:100px;overflow:hidden;border:solid black thin;position:absolute;">
<img src="scroll.jpg" style="margin-top: 25px;">
</div>
<script>
$(document).ready(function() {
$('#scroll').marquee({
speed:28000,
gap: 0,
delayBeforeStart:0,
direction: 'left',
duplicated: true
});
});
Try this out:- http://jsfiddle.net/adiioo7/fqg9d/
Working fine at my end.
$(document).ready(function () {
$('#scroll').marquee({
speed: 28000,
gap: 0,
delayBeforeStart: 0,
direction: 'left',
duplicated: true
});
});
Related
I am trying to display a dialog box when users access a page with a device smaller than a desktop. I am not an expert in jQuery. I tried the following below but was not successful.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
}).show();
} else {
$("ScreenSize").dialog().hide();
}
});
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
This code is executed on Dom ready. Considering that you open that dialog only in the if branch, actually the else branch is useless because when you reload the page, it doesn't get opened at all. Or maybe there is some other logic that you are not providing.
Then .dialog() is a method of the jQuery UI library. You should add also that library in order to get the dialog working. If you open your console you see that the method dialog() is undefined.
Your javascript code is OK. On the html part, jQuery and jQuery UI (for the dialog widget) scripts must be loaded in the correct order: jQuery first, UI after. Try the following code snippet, it works as you wanted.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true
}).show();
} else {
// this part is useless...
$("ScreenSize").dialog().hide();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
</body>
</html>
Why is jQuery needed? Why not just use css media query to display and hide your dialog box.
CSS:
#ScreenSize {
display: none;
}
#media only screen and (max-width: 767px) {
#ScreenSize {
display: block;
}
}
i have used these following below in order to find a solution to my problem
$(function () {
if (screen.width < 1023) {
$("#ScreenSize").show();
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
resizable: false, draggable: false,
})
}
else {
$("#ScreenSize").hide();
}
});
<span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>
<div style="margin-left: 23px;">
<p>go to Text Box</p>
</div>
<//div>
I am attempting to add animation to the text on my slides built with slick.js. I attempted to use some code form this post(Slick Carousel target active slide to add and remove animation classes) but it is not adding any classes.
I feel like there is something wrong with my callback functions since I do not see these classes being added. Anyone have an idea?
<script>
$(document).ready(function(){
$('.featured-wrap').slick({
infinite: true,
speed: 400,
autoplaySpeed: 6000,
autoplay: true,
fade: true,
slide: 'div',
cssEase: 'linear',
dots: true,
arrows: true,
pauseOnHover: false,
adaptiveHeight: true
});
});
</script>
<script>
$(document).ready(function(){
$('.featured-wrap').on('afterChange', function(event, slick, currentSlide){
$('.slick-active .display').removeClass('hidden');
$('.slick-active .display').addClass('animated fadeInDown');
});
$('.featured-wrap').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick-active .display').removeClass('animated fadeInDown');
$('.slick-active .display').addClass('hidden');
});
});
</script>
html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="app2.js"></script>
<style>
body {
background-color: lightblue;
}
#slickslide {
height: 200px;
background: lightgray;
}
#content {
margin: auto;
padding: 20px;
width: 80%;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="demo"></div>
<div id=content>
<div id="slickslide" slick="">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
</div>
</div>
</body>
</html>
JavaScript code
function myFunction() {
$(document).ready(function(){
$('#slickslide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1
});
});
}
Sorry, but I am not getting where actually I did the mistake (as I am a newbie to javascript). I wrote this code for the flipbook effect using turn.js with the help of a tutorial. But the output in a browser is just showing the blank screen. I guess, there must be an awkward mistake but m still not getting it . plz help.
<html>
<head>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
<style type="text/css">
body{
background: #9988aa;
}
#book{
width: 1152px;
height: 400px;
}
#book .turn-page{
background-color: #ddd;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="book">
<div style="background-image:url('images/1.jpg');"></div>
<div style="background-image:url('images/2.jpg');"></div>
<div style="background-image:url('images/3.jpg');"></div>
<div style="background-image:url('images/4.jpg');"></div>
<div style="background-image:url('images/5.jpg');"></div>
<div style="background-image:url('images/6.jpg');"></div>
<div style="background-image:url('images/7.jpg');"></div>
<div style="background-image:url('images/8.jpg');"></div>
</div>
<script type="text/javascript">
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50;
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
</script>
</body>
</html>
Hi there is small error in your code, kindly just remove semi colon from following line.
elevation:50;
It should be like following, just remove semi colon. Hope it will resolve your issue.
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
I have HTML which includes scripts in following order
<script src="../static/js/jquery.js" type="text/javascript">
<script src="../static/js/bootstrap.js" type="text/javascript">
<script src="../static/js/slides.js" type="text/javascript">
<script src="../static/js/app.js" type="text/javascript">
and images are tied to div as
<div id="slideshow">
<div id="slides">
<img src="../static/img/slideshow/01.JPG">
<img src="../static/img/slideshow/02.JPG">
<img src="../static/img/slideshow/03.JPG">
<img src="../static/img/slideshow/04.JPG">
<img src="../static/img/slideshow/05.JPG">
<img src="../static/img/slideshow/06.JPG">
</div>
</div>
where jquery.js is JQuery v1.7.2 and slide.js is latest slide.js downloaded.
To me it seems correct order as well. What my app.js does is
$(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
I tried on both Firefox and Chrome, it doesn't seem to work, all my images are displayed one after the another
What is that I am not doing right here??
You forget some div classes.
You can find a jsfiddle example I put in place here : http://jsfiddle.net/rNF8G/
EDIT 1:
You can add the play: 2000 property to the first block instead of calling it like this : $('#slides').slides("play");
See my edit here : http://jsfiddle.net/rNF8G/1/
EDIT 2:
To remove pagination, all you have to do is to add the following property :
generatePagination: false
You can see it in the following update : http://jsfiddle.net/rNF8G/117/
Instead of this...
$(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
try this...
$(document).ready(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
You don't seem to be attaching the handler correctly to the document ready event
If that doesn't work, can you provide a jsfiddle?
Try with JQuery Cycle: http://jquery.malsup.com/cycle/
HTML
<div id="slides">
<img src="../static/img/slideshow/01.JPG">
<img src="../static/img/slideshow/02.JPG">
<img src="../static/img/slideshow/03.JPG">
<img src="../static/img/slideshow/04.JPG">
<img src="../static/img/slideshow/05.JPG">
<img src="../static/img/slideshow/06.JPG">
</div>
JQuery
$('#slides').cycle({
fx: 'scrollRight',
speed: 'slow',
timeout: 5000
});
<link rel="stylesheet" type="text/css" href="jquery-tooltip/jquery.tooltip.css"/>
<script type="text/javascript" src="jquery-tooltip/jquery.tooltip.js"></script>
<div id="baby" title="My tootip">The text</div>
<script type="text/javascript">
$(function(){
$('#baby').tooltip({
track: true,
delay: 0,
showURL: false,
showBody: " - ",
extraClass: "pretty",
fixPNG: true,
opacity: 0.95,
left: -120
});
});
</script>
The files are found, and they are not 404.
Can't confirm your problem. Your code copy/pasted works just fine
Demo http://jsbin.com/iwojo3