I believe this question has been asked multiple times and I have researched many other articles but I'm afraid I'm at a complete impasse...
I am trying to make a very basic flexslider but it simply does not seem to want to work for me. The images appear as lists, so the HTML and the image links would seem to be Ok. This leads me to believe I have missed something in the JS.
Would anybody be able to advise me?
Many Thanks in advance.
Ryan
<!DOCTYPE html>
<html>
<head>
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="../lachantongeimg/group.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/howtojoin.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/playmusic.jpg" alt=""/>
</li>
</ul>
</div>
</body>
</html>
If your photos appear like a list, must be the CSS file. Make sure the file exist or fix your path.
The only difference that I found with the official documentation is the option to animate:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
here there is a basic example working exactly as you have:
https://jsbin.com/jicodadace/2/edit?html,console,output
Related
Link to jQuery plugin github and documentation
It is the exact same code, the only difference being that I link to several sources/external files instead of just throwing them all into one big file like on jsfiddle. But I get no error in the browser console, everything is linked properly.
It image lightbox works, the video light almost works, I just get a black blank empty light when clicking on the video link. When clicked this gets added to the HTML, but the HTML is empty inside the iframe. But on jsfiddle it is not.
<iframe class="lg-video-object lg-youtube " src="//www.youtube.com/embed/VXEkoXgb4bI?wmode=opaque&autoplay=1&enablejsapi=1" allowfullscreen="" height="315" frameborder="0" width="560">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
I've been over and over this, and I can't even come up with one reason why it happens, I've tested in Firefox, Chrome and even IE. And since it works on jsfiddle in Firefox, so it can't really be the browser.
Any help is really appreciated, I'm so in the woods. I'm hoping it is just something really simple that I can't see because I've stared at intensely for hours.
Thanks.
Link to jsfiddle: http://jsfiddle.net/vtkv4j2h/5/
Link to the local files: https://mega.nz/#F!4QhXhQaY!vaIMGXqYSzJf8s8qkVouqg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Why doesn't this work, when it works on jsfiddle</title>
<link rel="stylesheet" href="lightgallery.min.css" media="screen" title="lightgallery">
</head>
<body>
<div id="lightgallery">
<a href="https://dummyimage.com/1200x700/000/fff.jpg">
<img src="https://dummyimage.com/300x200/000/fff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/d40fd4/0011ff.jpg">
<img src="https://dummyimage.com/300x200/d40fd4/0011ff.jpg.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/44d613/0011ff.jpg">
<img src="https://dummyimage.com/300x200/44d613/0011ff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/1ff068/0011ff.jpg">
<img src="https://dummyimage.com/300x200/1ff068/0011ff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/5e6063/0011ff.jpg">
<img src="https://dummyimage.com/300x200/5e6063/0011ff.jpg" />
</a>
<a href="https://www.youtube.com/watch?v=VXEkoXgb4bI" data-poster="https://dummyimage.com/1200x700/fc1241/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/fc1241/313de6.jpg&text=Video1"/>
</a>
<a href="https://www.youtube.com/watch?v=VkzVgiYUEIM" data-poster="https://dummyimage.com/1200x700/73f00c/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/73f00c/313de6.jpg&text=Video2"/>
</a>
<a href="https://www.youtube.com/watch?v=7BWWWQzTpNU" data-poster="https://dummyimage.com/1200x700/f7ff00/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/f7ff00/313de6.jpg&text=Video3"/>
</a>
</div>
<script src="jquery.js" charset="utf-8"></script> <!-- jQuery v3.1.0 -->
<script src="lightgallery.min.js" charset="utf-8"></script>
<script src="lg-video.min.js" charset="utf-8"></script>
<script src="js.js" charset="utf-8"></script>
</body>
</html>
js.js
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
Thank you all for help and suggestions.
#Novice was right.
Are you sure using a web-server to access if your url shows something
like this file:/// rather than http:// then its a problem
Switching to a properly virtual box solved the issue.
I just started doing some php and I followed one tutorial on udemy page on how to build some simple php website. Now I want to animate the nav bar items border-radius with Js/Jquery. But it doesn't seem to work for me.
I used php include to include navbar into header and then the header into the main php files.
This is my navbar file.
<ul>
<li id="indexx">Home</li>
<li id="teamm">Team</li>
<li id="menuu">Menu</li>
<li id="contactt">Contact</li>
</ul>
And I included that in my headers div id="nav" like this.
<?php
$companyname = "Franklin's Fine Dining";
include ('arrays.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo TITLE; ?></title>
<link rel="stylesheet" href="assets/styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="includes/animatioon.js"></script>
</head>
<body id="final-example">
<div class="wrapper">
<div id="banner">
<img src="img/banner.png" alt="nema slike jbg." />
</div>
<div id="nav">
<?php include ('includes/nav.php'); ?>
</div>
<div class="content">
My website has main php files like index,menu,team etc. which include the header.
So how can I animate these navbar items so that their border-radius changes when I enter mouse?
Since the navbar is included in header and header in every main php file, I tried to add the source of the jquery and js file in which my code for 'animation' is into my header.php but it doesn't seem to work.
Can someone give me some tips on how should I do it?
Btw this is the code for animation:
$(document).ready(function() {
$('#indexx,#teamm,#menuu,#contactt').mouseenter(function() {
$(this).animate(borderRadius(300),200);
});
THANK you everyone I managed to make it work. But I still have a problem.
This is what my ul and li look like:
Now is there way to animate the li (home,team,menu,contact) border radius since they're a li element? I added the width and the height properties.
But when I do mouseenter I get these changes but the border radius doesn't change, I mean the boxes still don't 'curved'
. I'm sorry in advance for maybe asking stupid questions and for bad explanation but I'm only beginner in this, as I said I followed tutorial on how to build this web page.
remember that php is a server-side language that helps you build dynamic HTML. so make sure that you pre-include all the JavaScript you need for anything that happens on the client-side. see my example below, I assumed that your jquery selector is correct.
<head>
<meta charset="utf-8">
<title><?php echo TITLE; ?></title>
<link rel="stylesheet" href="assets/styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="includes/animatioon.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#indexx,#teamm,#menuu,#contactt').mouseenter(function() {
$(this).animate(borderRadius(300),200);
});
});
</script>
</head>
I am suggesting to write your inline Script before close of body tag </body>.
Also suggest you one improvement in jQuery selector. if you want to effect in all <li> tag of then dont use id.
your nav.php
<ul id="my_navbar">
<li >Home</li>
<li >Team</li>
<li >Menu</li>
<li >Contact</li>
</ul>
Your index.php file
<?php
$companyname = "Franklin's Fine Dining";
include ('arrays.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo TITLE; ?></title>
<link rel="stylesheet" href="assets/styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="includes/animatioon.js"></script>
</head>
<body id="final-example">
<div class="wrapper">
<div id="banner">
<img src="img/banner.png" alt="nema slike jbg." />
</div>
<div id="nav">
<?php include ('includes/nav.php'); ?>
</div>
<div class="content">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#my_navbar li').mouseenter(function() {
$(this).animate(borderRadius(300),200);
});
});
</script>
</body>
</html>
This question already has answers here:
jquery fadeIn not working
(4 answers)
Closed 6 years ago.
I know this probably seems repetitive, but I can't get jQuery working on my site. I have looked through a lot of posts on here, but still can't seem to find the answer.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Rodeo Rich's Steakhouse</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Holtwood+One+SC" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<header>
<img src="img/logo.png" id="logo" alt="Rodeo Rich's Steakhouse">
</header>
<nav>
<ul>
<li>MENU</li>
<li>OUR STORY</li>
<li>GIFT CARDS</li>
<li>CONTACT US</li>
<ul>
</nav>
<img src="img/logo.png" id="pic" alt="Rodeo Rich's Steakhouse">
</body>
</html>
Here is the code from my JavaScript file that isn't doing anything to "#pic":
$(document).ready(function(){
$("#pic").fadeIn("slow");
});
I know that my path name to the .js file is correct
I have the Google CDN in my section as well.
All help will be greatly appreciated! :)
Your image has to be hidden before it can fade in, so for example you can do:
$(document).ready(function(){
$("#pic").hide().fadeIn("slow");
});
You have to hide your image in first (with CSS display:none or with jQuery .hide).
This works:
$('#pic').hide();
$('button').click(function () {
$('#pic').fadeIn('slow');
});
DEMO
My overall intention is to over-ride the .click function of an element with a certain id, so that a button will replace only the contents of a specific element (not the whole page).
I am under the impression that I am running into trouble when embedding the script file, or in some of the coding in the script file.
I have come to this conclusion due to the fact that when my HTML and JS files are pasted into their respective windows on JSFiddle.net, that it works.
However, when I try to run the file from localhost, it is as though my .js file is not over-riding the .click function.
Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="./scripts/navScript.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- COURSES page -->
<div data-role="page" id="noteVote">
<div data-role="header" align="middle" class="header">
<img src="./images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- This is the Navbar -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
</div>
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="coursesContent">
Main section
</div>
<!-- FOOTER -->
<div data-role="footer" class="footer">
SomeText
</div>
</div>
<!-- /COURSES -->
<!-- SEARCH -->
<div data-role="page" id="search">
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="searchContent">
<h1>Search Section</h1>
</div>
</div>
</body>
</html>
I believe I have linked the scripts in the correct order: JQuery, my_custom, JQuery Mobile.
So is it in my custom script that there is the error?
$("#searchButton").click( function() {
$('#coursesContent').html( $('#searchContent').html() )
});
If there is a better/easier way to do this, please let me know.
I have searched the internet for solutions, and I found that the order in which the scripts are loaded is important. I also tried inserting my script code inside a "$(document).bind("mobileinit", function(){ " function, which did not yield the results I'd hoped for.
I'm obviously quite new to JavaScript, and JQuery.
Thanks for your help, people.
You're right - order of the script is important (all lib's have to be loaded before you can refer to them).
You may use alternative javascript for this purpouse:
$(document).ready(function()
{
$(document).on("click","#searchButton",function(e)
{
e.preventDefault();
alert('And now what? Click will not take me anywhere...');
$('#coursesContent').html($('#searchContent').html());
});
});
Try to put this code at the bottom of the page (before </body>) and check browsers console for any other JS errors.
This is working example: http://jsfiddle.net/3Qaq7/1/
I want to create a book style page turn effect on some images so I decided to use the JQuery plugin, JFlip. The plugin seems to be doing what it is supposed to do except display the image. I have checked the Network tab and the images are being loaded. Also, I can see the Canvas element JFlip has created but it is just a blank space.
I have some code:
<ul id="g1">
<li>
<img src="img/proforma.jpg">
</li>
<li>
<img src="img/proforma2.jpg">
</li>
</ul>
And some javascript:
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
<script type="text/javascript">
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
</script>
It does work, just the plugins are a bit old. See my code below :
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<!--[if IE]><script type="text/javascript" src="http://www.jquery.info/scripts/jFlip/excanvasX.js"></script><![endif]-->
<script src="http://www.jquery.info/scripts/jFlip/jquery.jflip-0.3.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul id="g1">
<li>
<img src="http://keith-wood.name/img/calendar.gif">
</li>
<li>
<img src="http://keith-wood.name/img/calendar.gif">
</li>
</ul>
</body>
</html>
JS:
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
See the full solution here : http://jsbin.com/iqaran/1/edit . Remember to run with js in jsbin
Cheers !
Turns out that script is so old (2008), you need to include the jQuery migrate script.
JSFiddle
Scripts
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
HTML
<ul id="g1">
<li>
<img src="http://placehold.it/300x300"/>
</li>
<li>
<img src="http://placehold.it/300x300" />
</li>
</ul>
Also make sure to wrap your executing code in a document.ready so the images get the change to render.
JS
<script>
$(document).ready(function() {
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
});
</script>