I m trying to make a slider using jquery..i downloaded the cycle plugin for my slider and included that too in my file...i m using 7 pic for my slider.. below is the code...please tell what is the problem
<!DOCTYPE html>
<html>
<head>
<style>
#hero{width:200px;height:220px;display:block;position:relative;margin:auto;border-style:solid;border-color:grey;}
#slider{width:200px;height:200px;display:block;position:absolute;}
#next{display:block;float:right;height:30px;width:30px;position:relative;z-index:99;cursor:pointer;}
#prev{display:block;float:left;height:30px;width:30px;position:relative;z-index:99;cursor:pointer;}
</style>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
timeout: 2000,
next: '#next',
prev: '#prev'
});
</script>
</head>
<body>
<div id="hero">
<div id="prev">
<img src="right.jpg">
</div>
<div id="next">
<img src="left.jpg">
</div>
<div id="slider">
<div id="1"><img src="1.jpg"></div><br><br>
<div id="2"><img src="2.jpg"></div><br>
<div id="3"><img src="3.jpg"></div><br>
<div id="4"><img src="4.jpg"></div><br>
<div id="5"><img src="5.jpg"></div><br>
<div id="6"><img src="6.jpg"></div><br>
<div id="7"><img src="7.jpg"></div><br>
</div>
</div>
</body>
</html>
Have you tried to change the position of plugins? Shouldn't <script type="text/javascript" src="jquery-2.1.0.min.js"></script> be before <script type="text/javascript" src="jquery.cycle.all.js"></script>?
Related
This is my first attempt with using bower packages and NPM. I am trying to use Gridstack.js - link.
What am I missing? Any help or input would be greatly appreciated.
Here is the tags for my html:
<head>
<link type="text/javascript" href="bower_components/gridstack/dist/gridstack.min.css" />
<script type="text/javascript" src="bower_components/gridstack/dist/gridstack.min.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="bower_components/lodash/dist/lodash.min.js"></script>
</head>
<body>
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item"
data-gs-x="4" data-gs-y="0"
data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content"></div>
</div>
</div>
<script>
$(function () {
var options = {
cell_height: 80,
vertical_margin: 10
};
$('.grid-stack').gridstack(options);
});
</script>
</body>
I am having trouble getting the jquery cycle2 plugin to work.
The slideshow doesn't load and the images. They just appear 1 underneath each other. I don't see any console errors. I have the latest jquery(3.0).
Here is my code. By the way, I am relatively new to javascript and jquery :
$('document').ready(function($) {
$('#slideshow').cycle({
timeout: 0, // no autoplay
fx: 'fade', //
next: '#next',
prev: '#prev'
});
});
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/assets/scripts/jquery.min.js"></script>
<!-- Cycle2 -->
<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/assets/scripts/jquery.cycle2.min.js"></script>
</head>
<div id="slideshow">
<div style="width:250px; height:150px; background:red;"></div>
<div style="width:250px; height:150px; background:blue;"></div>
<div style="width:250px; height:150px; background:green;"></div>
<div style="width:250px; height:150px; background:yellow;">
</div>
<div id="prev" style="float:left;">PREV</div>
<div id="next" style="float:right;">NEXT</div>
I am not sure why this isn't working. As this is an example that was previously given by someone. I am using wordpress by the way. It is not working in chrome nor firefox.
Its because you haven't specified which child HTML element you need to cycle through. Please add data-cycle-slides="> div" to your markup.
Documentation:
Cycle2 allows you to use any type of element for the slides, it's not
solely for cycling images. However, images are the default slide type
so to use other elements you need to override the slides option as
show on this page. The slides option can be set to any valid jQuery
selector. The default value is > img which is a selector to find all
image elements that are immediate children of the slideshow container.
Fiddle: https://jsfiddle.net/codeandcloud/tf24noy6/
Snippet
<!DOCTYPE html>
<html>
<head>
<title>Cycle2 Plugin - Malsup by codeandcloud</title>
<script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<title>Cycle2 Plugin - Malsup by codeandcloud</title>
<script type='text/javascript'>
//<![CDATA[
$('document').ready(function ($) {
$('#slideshow').cycle({
timeout: 0, // no autoplay
fx: 'fade', //
next: '#next',
prev: '#prev'
});
});
//]]>
</script>
</head>
<body>
<div style="width: 250px">
<div id="slideshow" data-cycle-slides="> div">
<div style="width:250px; height:150px; background:red;"></div>
<div style="width:250px; height:150px; background:blue;"></div>
<div style="width:250px; height:150px; background:green;"></div>
<div style="width:250px; height:150px; background:yellow;"></div>
</div>
<div id="prev" style="float:left;">PREV</div>
<div id="next" style="float:right;">NEXT</div>
</div>
</body>
</html>
I have 2 pages in jquery mobile html code. I want when the school page is loaded it should display an alert
HEADER PART
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<link href="custom/scripts/new.js" rel="stylesheet" type="text/javascript">
This is the pages code
div data-role="page" id="indexpage" data-theme="e">
<div data-role="header" data-theme="b">
<h1>S-Select</h1>
</div>
<div data-role="content">
<div class="row">
Schools
</div>
</div>
</div>
<div data-role="page" id="schoolpage" data-theme="e">
<div data-role="header" data-theme="e" data-position="fixed">
Back
<h1>Header</h1>
</div>
<div data-role="content">
school page
</div>
I also have a javascript code that should show the alert when schoolpage is loaded after the click of school button(#school) in the index page
The script is saved as new.js
$("#schoolpage").on("pageshow", function(){
alert("hello");
});
I have also tried
$("#school").on("click", function(){
alert("hello");
});
But both don't work
$("#schoolpage").on("tap", function(){
alert("hello");
});
Does the above code solve your problem?
Twitch.tv used to offer its users the ability to upload a channel background, but has long since removed this feature. I've been trying to add it back, and been unsuccessful.
This is what I am working with here, from twitch:
Note: the ember### and data-bindattr-###="###" change often, so I didn't bother trying to tag those.
<div id="ember841" class="ember-view" data-channel="jimieo">
<div class="content" data-bindattr-857="857">
<div id="channel">
<script id="metamorph-26-start" type="text/x-placeholder"></script>
<script id="metamorph-26-end" type="text/x-placeholder"></script>
<script id="metamorph-27-start" type="text/x-placeholder"></script>
<script id="metamorph-28-start" type="text/x-placeholder"></script>
<div id="ember872" class="ember-view"></div>
<script id="metamorph-28-end" type="text/x-placeholder"></script>
<script id="metamorph-27-end" type="text/x-placeholder"></script>
<div class="player-column host-frame js-host-frame" data-bindattr-874="874"></div>
</div>
</div>
</div>
I was trying to use the following to get it to work:
$(document).ready(function(){
$("#data-channel=jimieo > div#channel").prepend("<canvas height="1080" width="1920" image="i.imgur.com/5su8sTX.jpg"></canvas>");
});
The end result I was aiming for was this...
<div id="ember841" class="ember-view" data-channel="jimieo">
<div class="content" data-bindattr-857="857">
<div id="channel">
<canvas height="1080" width="1920" image="i.imgur.com/5su8sTX.jpg"></canvas>
<script id="metamorph-26-start" type="text/x-placeholder"></script>
<script id="metamorph-26-end" type="text/x-placeholder"></script>
<script id="metamorph-27-start" type="text/x-placeholder"></script>
<script id="metamorph-28-start" type="text/x-placeholder"></script>
<div id="ember872" class="ember-view"></div>
<script id="metamorph-28-end" type="text/x-placeholder"></script>
<script id="metamorph-27-end" type="text/x-placeholder"></script>
<div class="player-column host-frame js-host-frame" data-bindattr-874="874"></div>
</div>
</div>
</div>
Not sure if this is the best way to do it but just tested it works via browser console.
$(document).ready(function(){
$("<style type='text/css'> .js-directory, tse-content { background: #000000 url('http://i.imgur.com/5su8sTX.jpg') no-repeat fixed center !important; } </style>").appendTo("head");
});
I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o
Here's my code:
<div id="tabs">
<div id="overview">
Overviews
</div>
<div id="gallery">
Gallery
</div>
</span>
<div id="reviews">
Reviews
</div>
</div>
Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.
How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?
Thank you so much in advance!! :)
P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/
Quick example:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
Update
In regards of your application:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>