I am using Foundation to create a website that involves the Orbit Slider. Try as I may, I can't change the speed of the slider. Everything is working properly (jquery, slider controls, slider bullets, customized CSS for slider, etc.), I just can't seem to change the parameters of the slideshow.
The head of my document:
<script src="js/vendor/custom.modernizr.js"></script>
<script>
$(document).foundation('orbit', {
timer_speed: 100,
});
</script>
And at the end of my body:
<script>
document.write('<script src=js/vendor/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation(
);
</script>
Like I said everything is functioning fine, I just can't change the parameter.
Thanks!
Try the below structure instead. Your issue is that you're referencing orbit before the foundation script is loaded, so that js in the head is essentially ignored.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- your content -->
<script>
document.write('<script src=js/vendor/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation('orbit', {
timer_speed: 100,
});
</script>
</body>
</html>
Related
Currently I'm programming in the front end and I have run into a problem where my javascript files dont load. My files are .jsp becauase of scala/scalatra backend. I have my index.jsp where I include my header file in the top and in the bottom I include my footer.
I include them like this:
<jsp:include page="header.jsp"/>
// CODE //
<jsp:include page="footer.jsp"/>
My header looks like this:
<!-- HEADER -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles/cssfile.css">
<link rel="stylesheet" href="css/cssfile.css">
</head>
<body>
And my footer looks like this:
<!-- FOOTER -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
My main.js looks like this:
$(document).ready(function () {
'use strict';
$(function() {
$('a[href*=#]:not([href=#])').click(function () {
if (
location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
|| location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if ( target.length ) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
});
My file structure is like this:
css
-cssfile1
-cssfile2
js
-jquery.js
-main.js
header.jsp
index.jsp
footer.jsp
Mr src route shoulde be correct and when I insepect the source code of the site I can see the main.js file and click on it and it is the correct js.
I have tried console.log("test"); and nothing appears, so it does not load.
I added the jquery.js with the jquery javascript in it and added it first in the footer as you can see.
So what I want is that my main.js should load.
Thanks in advance :)
JSP EL provides a variable (${pageContext.request.contextPath}) that can be used at design-time to help resolve to the proper path at runtime. Try this might help, are you using the correct jquery libary?
<script type="text/javascript" src="${pageContext.request.contextPath}/js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
I just started to go further in my web development skills in my job and stucked with a little problem.
I have an iFrame (iframe.html), and in this iframe is a div styled as a green square.
I want to change the color of the Div outside the iframe with a button in my Parent (index.html) with an onClick Function.
I tried a few things, like calling a normal Function (document.getElementById and so on). But nothing really worked.
So I thought, that jquery might have some solutions and I'm stucked now in this code, but it doesn't work.
Can anyone help?
PS: this is not a cross-origin case. i got both html files in the same Directory.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="jquery-1.12.2.min.js"></script>
<title>buttonframetest</title>
<script type="text/javascript">
function Clickit() {
$(document).ready(function(){
$('iframe').contents().find('background-color').css('backgroundColor', 'white');
});
}
</script>
</head>
<body>
<iframe id="iframe" src="iframe.html" width="500px;" height="500px">
<p>iFrame nicht darstellbar in deinem Browser</p>
</iframe>
<br>
<button type='button' onClick="Clickit();">Klick</button>
<button type="button" onclick="redy">CHANGE</button>
<br>
<div class="ChangeColor"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
This can be done with the DOM iframe object's contentDocument property:
document.frames[0].contentDocument.getElementById('id here').style['background-color']=whatever;
Or, alternatively, with window.postMessage:
// this is in parent
document.frames[0].postMessage('red', '*');
// this is in frame
window.onmessage = function(x) {
if (x.origin == 'http://www.example.com') document.getElementById('id here').style['background-color'] = x.data;
}
Add this,
Update your jQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
function clck(){
$(document).ready(function(){
$('iframe').css({
'background' : '#fff'
});
});
}
I want to use 2 players synchronously. When I trigger the play in one, both run together!
Is there any way to when the User move the video forward or there is some buffer in a video, both videos still together?
Absolutely. Here is some quick basic example code that uses our JavaScript API to do this. Note, this uses 6.12 and uses HTML5, but the same should work with Flash/RTMP/JW7. This uses our JavaScript API - http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference
Code:
<!DOCTYPE html>
<html>
<head>
<title>Sync</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js" type="text/javascript"></script>
</head>
<body>
<div id="player1"></div>
<br />
<div id="player2"></div>
<script type="text/javascript" language="javascript">
jwplayer("player1").setup({
file: "http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4",
});
jwplayer("player2").setup({
file: "http://content.bitsontherun.com/videos/bkaovAYt-364766.mp4",
});
jwplayer("player1").onBeforePlay(function(){
jwplayer("player2").play();
});
jwplayer("player2").onBeforePlay(function() {
jwplayer("player1").play();
});
jwplayer("player1").onPause(function(){
if(jwplayer("player2").getState() == "PLAYING"){
jwplayer("player2").pause();
}
});
jwplayer("player2").onPause(function(){
if(jwplayer("player1").getState() == "PLAYING"){
jwplayer("player1").pause();
}
});
jwplayer("player1").onSeek(function(e){
jwplayer("player2").seek(e.offset);
});
jwplayer("player2").onSeek(function(e){
jwplayer("player1").seek(e.offset);
});
</script>
</body>
</html>
Update, here is an example of this working with one set of controls for both players:
<!DOCTYPE html>
<html>
<head>
<title>Sync</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js" type="text/javascript"></script>
</head>
<body>
<div style="float:left;"><div id="player1"></div></div>
<div style="float:right;"><div id="player2"></div></div>
Play/Pause |
Stop |
Seek Back |
Seek Ahead
<script type="text/javascript" language="javascript">
jwplayer("player1").setup({
file: "http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4",
controls:false
});
jwplayer("player2").setup({
file: "http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4",
controls:false
});
</script>
</body>
</html>
I downloaded two scripts from the net,
one looks like this
<script src="jqzoom/js/jquery-1.6.js" type="text/javascript"></script>
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
<script>
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
});
</script>
and the other
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
<script>
$(function () {
$("#mybook").booklet();
});
</script>
When I place both in one page only the latter works, however individually they work fine.
I understand you can't call jQuery twice within the same page, but when I remove all the jQuery additions and just use /jquery.js none of them work. This is the scripts as I downloaded them, I figured the HTML between them is not needed to post here.
How can I make both work on one page?
You are adding 2 js libraries in first script and 4 to the second script. All the libraries essential to run their respective scripts.
One problem here is, you are adding jQuery twice which is 1.6 and 2.1. Which is unnecessary.
Try doing like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
//required for first script
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
//-------------
<script>
$(function () {
//this is your second script
$("#mybook").booklet();
//this is your first script
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
});
</script>
This should keep your second script running. And if first doesn't run then it means 'jqzoom' plugin is not compatible with jquery 2.1
Most problems from older jQuery versions are solved in their Migrate Plugin, you should check that out.
Just add the newest version and that plugin and your scripts should theoretically work.
with all other library include j query standard librery at once.
<script src="jqzoom/js/jquery-1.6.js" type="text/javascript"></script>
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
<script>
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
$("#mybook").booklet();
});
</script>
Ok, I'm building a website for a friend, I'm currently using jquery-1.4.3.min.js, corners.js, equalcols.js, and a pre-load image script in the head. Everything works great.
Problem is, I now need FancyBox (LightBox alternative) for a page and it won't seem to work! I know it's because something is conflicting with another but I have no idea what. Is it the order in the head? Or something else? Have tried LightBox and that doesn't work either.
It either doesn't work and stops the EqualCols.js from working, or everything else works EXCEPT the FancyBox for the mini-image gallery that is needed.
The head code is as below: (without FancyBox in there)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<!-- PRELOAD MENU IMAGES BEGINNING -->
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length ;
i + myimages [ i ] =new Image ( myimages [ i ]
src=preloadimages.arguments[i] } Enter path of images to be preloaded
inside parenthesis. Extend list as desired. preloadimages ( images /
home-h.png " images / about-h.png " images / services-rates-h.png "
images / past-work-h.png " images / contact-h.png " images /
shop-specials-h.png " images / free-quote-h.png " images /
book-now-h.png ")
</script>
<!-- PRELOAD MENU IMAGES END -->
<!-- stop curvery corners error in IE -->
<script type="text/javascript" src="js/corners.js"></script>
<script type="text/javascript">
var curvyCornersVerbose = false;
</script>
<!-- stop curvery corners error in IE -->
<!-- EQUAL COLS START -->
<script src="js/equalcols.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#left-col,#right-col').equalCols();
});
</script>
<!-- EQUAL COLS END -->
</head>
Is anyone able to tell me where I'd need to put the FancyBox coding for everything to work? Or what else I can do to get it to work? What are the rules? I've researched on Google and can't seem to find the answer I'm after.
The FancyBox code I need to implement is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Do I need the top line there if I'm using this already?:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
Any help much appreciated.
replace:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
with:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Fancybox code:
$(document).ready(function() {
$('#single_image').fancybox();
});
below code is working sample - the fancybox iframe version.
make sure that you add anchor tag in your html/jsp
<!-- The popup iframe . The href value will be updated dynamically -->
<a class="iframe" id="iframe" href="/YourApp/imagePopup.do"></a>
the include block is as follows
<script type="text/javascript" src="/js/jquery/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/js/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
/**
jquery ready function
*/
$(document).ready(function(){
// popup for showing
$("a.iframe").fancybox({
'autoDimensions':false,
'width' : 770,
'height' : 'auto', // height is controlled using jquery.fancybox-1.3.4.css line 79
'centerOnScroll' : true,
'scrolling':'auto',
// 'autoScale': true,
'hideOnOverlayClick' : false,
'enableEscapeButton' :true,
'hideOnContentClick': false,
'type':'iframe'
,'onStart' :function(){$.fancybox.showActivity();}
,'onClosed' :function(){ }
});
}); // end ready