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>
Related
I wrote the javascript, which is working absolutely fine on my computer. It shows popup window with some text and image when you press on iv element. But with wordpress it does not work. On wordpress it adds the image, which should be in popup window, bellow the content of the website.
In developer tool it shows the error:
TypeError: undefined is not an object (evaluating '$j('[data-q_id="'+a+'"]').offset().top')
Here is the code
<body>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#clickMe1').click(function(event) {
var mytext = $('#literOne').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").remove();
}
});
}); //close click
});
</script>
<script type="text/javascript">
$(function() {
$('#clickMe2').click(function(event) {
var mytext = $('#literTwo').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").remove();
}
});
}); //close click
});
</script>
<style>
.pi_liter{
cursor: pointer;
}
</style>
<!-- begin planirovki -->
<div class="planirovki">
<div class="plan_img_main">
<div class="plan_img" id="plans">
<div class="wmain" id="ankor1">
<div class="pi_liter pl1" section="1" id="clickMe1">
Литер 1
<textarea cols="0" rows="0" id="literOne" style="display:none">Some hidden text display none <img src="http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg" />
</textarea>
</div>
<div class="pi_liter pl2" section="2" id="clickMe2">
Литер 2
<textarea cols="0" rows="0" id="literTwo" style="display:none">Some hidden text display none two <img src="http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg" />
</textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end planirovki -->
</div>
<!-- end container_main -->
<link rel="stylesheet" type="text/css" href="css/style_adapt.css">
</body>
CSS
.wmain{max-width:1180px;margin:0 auto;}
.planirovki{}
.planirovki .tm{padding-top:88px;}
.planirovki .tm span{padding-bottom:0;padding-top:15px;}
.plan_head{padding-bottom:67px;}
.plan_img{background:url(http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg) no-repeat center top;}
.plan_img .wmain{height:1144px;position:relative;}
.pi_liter{text-align:center;font-size:24px;color:#003d7f;text-transform:uppercase;font-family:'Kudrashov Plain:001.001', arial;width:171px;height:125px;background:url(http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/07/plan_plashka.png) no-repeat;line-height:42px;position:absolute;cursor:default;padding-top:44px;}
.pi_liter span{font-size:17px;}
.pl1{left:73px;top:11px;}
.pl2{left:821px;top:11px;}
.pi_liter{-webkit-transition:0.3s;-moz-transition:0.3s;-ms-transition:0.3s;-o-transition:0.3s;transition:0.3s;}
.pi_liter:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
related url is http://cu33132.tmweb.ru/domnasobornoy/#plan
Thank you in advance!
Hope you can help me
It may be very silly question, I am new in javascript ,I Making a gallery using http://photoswipe.com/ js library ,I download js library from official site , I used given example index.html page
Normal working fine. But my problem when I append div $('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>'); on <div class="gallery-row"></div> using jquery append method from load function.
My problem : image show but when I click on the image then it not open with swipe div .
I waste my whole day but didn't get anything.
my code:
<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
<meta name="author" content="Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="code-photoswipe-1.0.11.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
function load(){
//append div from this function
$('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>');
}
</script>
</head>
<body onLoad="load()">
<div id="Header">
<img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" />
</div>
<div id="MainContent">
<div class="page-content">
<h1>PhotoSwipe</h1>
</div>
<div id="Gallery">
<div class="gallery-row">
<!--
<div class="gallery-item"><img src="images/thumb/001.jpg" alt="Image 001" /></div>
<div class="gallery-item"><img src="images/thumb/002.jpg" alt="Image 002" /></div>
<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>
-->
</div>
</div>
</div>
</body>
</html>
Try doing the append in the DOMContentLoaded handler, before you call Code.photoSwipe. Also, jQuery provides a shorter way to write this:
<script>
$(function() {
$('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>');
Code.photoSwipe('a', '#Gallery');
});
</script>
When you do this, remove onload="load()" from your <body> tag.
Perhaps it's the extra space in the href for your a tag? Try changing "images/full /003.jpg" to "images/full/003.jpg"
I guess, you need to do this :
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
After the append
After some Test, DOMContentLoaded is fired before onload
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>?
I have one main page with menu buttons. When clicked, they change the main "content" area with AJAX. In the header of this page I have all of the appropriate Dojo references.
I know the AJAX works because i have successfully pulled in and displayed data in the content area, and I know the Dojo Dijit TimeTextBox works because I have successfully displayed it before I make any calls with AJAX.
When I try to make a call with AJAX and pull in new input fields for the TimeTextBox widget, they display only as regular text boxes, and seem to ignore the fact that I have them set to be the TimeTextBox.
Can anyone tell me how to fix this issue?
EDIT:
Here is the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Admin Page</title>
<link rel="stylesheet" type="text/css" href="styles/adminPage.css" />
<link rel="stylesheet" type="text/css" href="styles/adminStyle.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TimeTextBox");
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
require(["dojo/ready", "dijit/form/TimeTextBox"],
function(ready, TimeTextBox){
ready(function(){
new TimeTextBox({name: "timeInput", value: new Date(),
constraints: {
timePattern: 'HH:mm:ss',
clickableIncrement: 'T00:15:00',
visibleIncrement: 'T00:15:00',
visibleRange: 'T01:00:00'
}
}, "timeInput");
});
});
function getPage(page)
{
$.ajax({
url: "admin"+page+".php",
type: "POST",
cache: false,
success: function (html) {
$('#content').html(html);
$('#content').fadeIn('slow');
}
});
}
</script>
</head>
<body class="claro">
<div id="container">
<div id="header">
<span class="headerTitle">Lehman Nursery</span>
</div>
<div id="content">
<input type='text' name='date1' id='time1' value='T15:00:00'
data-dojo-type='dijit.form.TimeTextBox'
required='true' />
</div>
<div id="menu">
<a onclick="getPage('Home')">
<div id="homeButton" class="menuAppearance">
<img src="images/icons/home.png"/><br />
</div>
</a>
<a onclick="getPage('Links')">
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/links.png"/><br />Links</div>
<div class="description">
</div>
</div>
</a>
<a onclick="getPage('Hours')">
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/pictures.png"/><br />Pictures</div>
<div class="description">
</div>
</div>
</a>
<a onclick=getPage('Events')>
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/events.png"/><br />Events</div>
<div class="description">
</div>
</div>
</a>
<a onclick=getPage('Feedback')>
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/feedback.png"/><br />Feedback</div>
<div class="description">
</div>
</div>
</a>
</div>
</div>
</body>
<form>
<input type="text" name="date1" id="time1" value="T15:00:00"
data-dojo-type="dijit/form/TimeTextBox"
onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})"
required="true" /></form>
^^That is the data being pulled in
Are the css files for those dijits pulled up? You might want to require them at the beginning (when the page loads) which get cached and will be used when the dijits are pulled via AJAX.
EDIT: Not sure but can suggest you try to add startup() call for the widget you created.
it apears to me like you are forgoetting to call:
dojo.parser.parse();
after setting the content i your ajax call. it should look like this:
function getPage(page)
{
$.ajax({
url: "admin"+page+".php",
type: "POST",
cache: false,
success: function (html) {
$('#content').html(html);
dojo.parser.parse();
$('#content').fadeIn('slow');
}
});
}
the dojo parser will not execute by itself, it is too resourses expensive to do that, so each time the content changes so you add a dijit you moust call dojo.parser.parse();
I am having trouble getting a jquery plugin called ui multiselect to show up properly inside a modal (using jqmodal). I actually have tried another modal called simplemodal and a different multiselect plugin as well with no luck. From what I can gather, it appears the CSS of the for uimultiselect is not being applied because the multiselect resides inside the modal div, which has display: none at page load. I have tried a number of different things suggested by others having this issue and none have worked. Perhaps I am doing it wrong.
In my code, I displayed the multiselect inside and outside of the modal. It works perfectly fine outside.
here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery UI Multiselect</title>
<link rel="stylesheet" href="css/multiselect/common.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" />
<link type="text/css" href="css/multiselect/ui.multiselect.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="css/jqModalForm.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/jqModal.css" />
<script type="text/javascript" src="js/multiselect/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/multiselect/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/multiselect/plugins/localisation/jquery.localisation-min.js"></script>
<script type="text/javascript" src="js/multiselect/plugins/scrollTo/jquery.scrollTo-min.js"></script>
<script type="text/javascript" language="javascript" src="js/jqModal.js"></script>
<script type="text/javascript" language="javascript" src="js/jqDnR.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function() {
$('#addShortCodes').jqm({
trigger: '#addShortCodesTrigger',
overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
overlayClass: 'whiteOverlay'
})
.jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
// Close Button Highlighting. IE doesn't support :hover. Surprise?
$('input.jqmdX')
.hover(function(){ $(this).addClass('jqmdXFocus'); },function(){ $(this).removeClass('jqmdXFocus'); })
.focus(function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
.blur(function(){ $(this).removeClass('jqmdXFocus'); });
});
</script>
</head>
<body>
<img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" />
<div id="wrapper">
<div id="content">
<form action="index.html">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="FRA">France</option>
</select>
<br/>
<input type="submit" value="Submit Form"/>
</form>
Add
<script type="text/javascript" src="js/multiselect/ui.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'});
$(".multiselect").multiselect();
$('#switcher').themeswitcher();
});
</script>
<div id="addShortCodes" class="jqmDialog">
<div class="jqmdTL">
<div class="jqmdTR">
<div class="jqmdTC jqDrag">Add Short Codes</div>
</div>
</div>
<div class="jqmdBL">
<div class="jqmdBR">
<div class="jqmdBC">
<form id="addMonitor" action="addMonitor.do" method="post">
<div class="leftBox1">
Short Codes:
<textarea name="shortCodes" cols="20" rows="8"></textarea>
</div>
<div class="rightBox1">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="FRA">France</option>
</select>
</div>
<input type="hidden" name="requestId" value="${monitorRequest.requestId}" />
<div class="centerBox1">
<input type="submit" value="Add" />
</div>
</form>
</div>
</div>
</div>
<input type="image" src="dialog/close.gif" class="jqmdX jqmClose" />
</div>
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
<h2>Features</h2>
<ul>
<li>Search within available options, if there are a lots of them</li>
<li>Displaying counts of selected and available items</li>
<li>Select All / Deselect All Buttons</li>
<li>Dragging items from the available list to the selected list directly</li>
</ul>
<h2>Contributors</h2>
<ul>
<li>Michael Aufreiter</li>
<li>Yanick Rochon</li>
</ul>
</p>
<h2>Misc</h2>
<p>
There are no limitations. Do whatever you want with this plugin.
If you did some nice modifications, just let me know (via Github). I'd be happy to include them.
</p>
<h2>Elsewhere</h2>
<ul>
<li>DONUT? - Radial Navigator <small style="color: red;">NEW!</small></li>
</ul>
</div>
<div id="footer">
<p class="left">A Quasipartikel Production</p>
<p class="right">Template adopted from orderedlist.com</p>
<br class="clear"/>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10368067-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
please try to place your jquery code before </body> and after the target selector...
so jquery code after target selector can fire it up .
because jquery need to be manipulation the target after.
All three of the following syntaxes are equivalent:
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)
You might be using syntax that is not recommended, try this:
$(document).ready(function() {
instead of this
$().ready(function() {
I resolved the issue. I had to apply the mutiselect js in the callback from jqmodal
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var myOpen=function(hash){
hash.w.css('opacity',1).show();
$(".multiselect").multiselect();
$.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'});
};
$('#addShortCodes').jqm({
trigger: '#addShortCodesTrigger',
overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
overlayClass: 'whiteOverlay',
onShow:myOpen
})
.jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
// Close Button Highlighting. IE doesn't support :hover. Surprise?
$('input.jqmdX')
.hover(function(){ $(this).addClass('jqmdXFocus'); },function(){ $(this).removeClass('jqmdXFocus'); })
.focus(function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
.blur(function(){ $(this).removeClass('jqmdXFocus'); });
});
</script>