I am trying to use a fade in lazy loading effect. Although I have followed all the instructions but still the image is not appearing! Can anybody help more? code:
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
</head>
<body>
<div class="collateral-body-image">
<img class="lazy" data-original="images/vivid-collateral.jpg" width="1920" height="594">
</div>
<script type="text/javascript">
$(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
</script>
</body>
If you wanna get it running just load it using CDN urls.
Later you can download this scripts on your local and serve it using a local webserver on localhost.
Quick to-run code,
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
</head>
<body>
<div class="collateral-body-image">
<img class="lazy" data-original="http://montanasteele.com/wp-content/uploads/gallery/vivid-condos/vivid-collateral-02.jpg" width="800" height="800">
</div>
<script>
$(function(){
$("img.lazy").lazyload( {
effect: "fadeIn"
} );
} );
</script>
Related
I want to integrate a webplayer on my website to play my m3u streaming file.
I found this javascript file on github and tried to get it running. Unfortunately without success.
https://github.com/aitorciki/jquery-playlist
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.playlist.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('audio').playlistParser({
proxy: 'proxy.php'
});
});
</script>
<audio controls src="http://www.stream.com/stream.m3u">
</body>
</html>
the proxy.php file:
$url = file_get_contents($_GET["url"]);
echo $url;
Or is there a completely different solution?
Thanks
it seems the playlist plugin works with jQuery v3, not jQuery v1. After I modify your code to use jQuery v3, it works for me
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.playlist.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('audio').playlistParser({
proxy: 'proxy.php'
});
});
</script>
<audio controls src="http://www.stream.com/stream.m3u">
</body>
</html>
I have laravel layout
<html> //layout.blade.php
<head>
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.js"></script>
</head>
<body>
#yield("content")
</body>
</html>
And my view
#extends("layout")
#section("content")
<ul class="test">
<li>1</li>
<li>2</li>
</ul>
<script>
$(function() {
$(".test").selectable();
});
</script>
#endsection
My browser console always show me $(...).selectable is not a function
But if i make same without layout or without anonymous function this works
I think location is changed, because of route.
So you'd better to specify the correct url of "public" folder.
Please change like this.
<html> //layout.blade.php
<head>
<script src="{{URL::Asset('/js/jquery.js')}}"></script>
<script src="{{URL::Asset('/js/jquery-ui.js')}}"></script>
</head>
<body>
#yield("content")
</body>
</html>
As mentioned in the above question this kind of problem usually arises when you try to pass an argument or route variable. So it would be wise to use asset() or secure_asset() while using your resources in the page.
<html> //layout.blade.php
<head>
<script src="{{ asset('js/jquery.js') }}"></script>
<script src="{{ asset('js/jquery-ui.js') }}"></script>
</head>
<body>
#yield("content")
</body>
</html>
Also please check the network section of your browser to make sure your resources are loading perfectly.
I have just tried to implement wow.js to my site but it wont work.
I have linked everything but i don't know why it isn't working.
I even added the wow.js and linked it to the html but there still seems to be nothing that is working. I also added the animate.css and still there is no effect.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title> Vids </title>
<header> <img src="images/Logo.png" > </header>
</head>
<body>
<div class="vids-title">
<p>Vids</p>
</div>
<div class="video-1 wow slideInRight">
<h>Shia LaBeouf delivers the most intense motivational speech of all-time</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/nuHfVn_cfHU">
</iframe>
</div>
<div class="video-2 wow slideInLeft">
<h>Truth or Drink (Exes)</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/pxYpvNMbdXQ">
</iframe>
</div>
<div class="video-3 wow slideInRight">
<h>Walker broke his arm</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/5-NXguyFFko">
</iframe>
</div>
javascript
$(function(){
new WOW().init();
});
There is nothing wrong with your code - its working fine
https://jsfiddle.net/k3qaoyxe/
I included the directories as external resources and then
$(function(){
new WOW().init();
});
worked fine.
Are you sure you have included all the libraries properly and they are loading correctly - check the network tab in your developer console.
Libraries included from cdn:
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js
For me, it worked well after calling WOW at the window load event in addition to document ready event:
//At the document ready event
$(function(){
new WOW().init();
});
//also at the window load event
$(window).on('load', function(){
new WOW().init();
});
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
should probably be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="wow.js"></script>
<script src="javascript.js"></script>
You can also get rid of language and type attributes, they're useless and not W3C compliant.
I was thinking instead of loading everything in parallel. I will allow to load and display the basic no-styled layout and then will load the css file after page has finished loading, but being a newbie in Javascript. I am not able to do this.
Till now I have tryed:
<head>
<script type='text/javascript'>
function addstyle()
{
document.getElementBytype('text/css').href='style.css';
}
</script>
<link rel="stylesheet" type="text/css" href="">
</head>
<body onload="addstyle()">
<h1>Good Morning</h1>
<p>Hello whats up</p>
<p>Hope you will have a great day ahead</p>
</body>
Here as you can see, I am trying to load style.css after the page is displayed in the browser, but it is not working.
Try this:
<head>
<script type='text/javascript'>
function addstyle()
{
document.getElementById('style').href='style.css';
}
</script>
<link rel="stylesheet" id="style" type="text/css" href="">
</head>
<body onload="addstyle()">
<h1>Good Morning</h1>
<p>Hello whats up</p>
<p>Hope you will have a great day ahead</p>
</body>
If you are using jQuery you can do something like this:
$(document).ready(function(){
var $style_element = $(document.createElement('style'));
$style_element.attr({href:'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css', rel:'stylesheet', type:'text/css', id:'some_id'});
$('head').append($style_element);
});
While working with this .html page I found an annoying behavior. The moment I load the page it will load only some portion of the page ,if I refresh it,then loads properly.
Why is this happening ??
I have attached the images along with my html code.
The first image is what I am getting and the second one is the desired one.
This is the first image
and this is what I require
Here is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title>Imperial</title>
<style>
.smooth_zoom_preloader {
background-image: url(zoom_assets/preloader.gif);
}
.smooth_zoom_icons {
background-image: url(zoom_assets/icons.png);
}
</style>
<link href="./css/style.css" type="text/css" rel="stylesheet" />
<link type='text/css' href='./js-disclaimer/basic.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script type='text/javascript' src='./js-disclaimer/jquery.simplemodal.js'></script>
<script type='text/javascript' src='./js-disclaimer/basic.js'></script>
<script src="./js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="./js/custom.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
<script src="zoom_assets/jquery.smoothZoom.min.js"></script>
<script>
jQuery(function($){
$('#yourImageID').smoothZoom({
width: '80%',
height: '70%',
/******************************************
Enable Responsive settings below if needed.
Max width and height values are optional.
******************************************/
responsive: false,
responsive_maintain_ratio: false,
max_WIDTH: '',
max_HEIGHT: ''
});
});
</script>
</head>
<body style="background:none">
<!-- home -->
<!---- menu area--->
<div class="menu_area"> <img src="./img/logo.png" alt=""> <br>
<ul>
<li class="current">Home</li>
<li>World above the world</li>
<li>Spaces</li>
<li>Safety & Security</li>
<li>Plans</li>
<li>Location</li>
<li>Enquiry</li>
<li>Contact Us</li>
<br>
<br>
<li>About SD Corp.</li>
<li>ebrochure</li>
</ul>
</div>
<div class="NorthMarker" id="North" style="position:absolute;top:66%;left:18%;width:10px;height:10px; z-index: 99;">
<img src="img/NorthView.png" id="northview">
</div>
<div class="SouthMarker" id="South" style="position:absolute;top:66%;left:97%;width:10px;height:10px; z-index: 99;">
<img src="img/SouthView.png" id="southview">
</div>
<div style="float:left; margin-top:5%; margin-left:5%;"><img id="yourImageID" src="img/plan.jpg" width="86%" height="70%"/>
<div class="intermediate" style="display:none;position:absolute;left:0%;top:0%;background-color:rgba(0, 0, 0, 0.0);width:100%;height:100%;z-index:104;"></div>
<div class="northviewpart" style="display:none;position:absolute;top:27%;left:0%;width:100%;height:10px; z-index: 109;">
<img src="img/40N.jpg" style="width:100%;height:250px;">
</div>
<div class="southviewpart" style="display:none;position:absolute;top:27%;left:0%;width:100%;height:10px; z-index: 109;">
<img src="img/40S.jpg" style="width:100%;height:250px;">
</div>
<div id="basic-modal" class="footer_for_plan">© SDCPL 2013. All Rights Reserved | Disclaimer</div>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Disclaimer</h3>
<p>The content depicted herein is for general information and purely conceptual and is not legal offering nor will it be part of any binding document. The Developer reserves the right to delete, modify or supplement the content at any time for any reason without prior notification.</p>
</div>
</div>
</div>
</body>
</html>
The problem here is loading of JavaScript files.. Move all script tag at the end. Before closing body tag. hope it heps
If I had to guess (which I'm going to cuz I love gambling) I'd say it has something to do with...
Loading 3 copies of jQuery
Beginning all of your href="", src="" and url() attributes with a period
Here are the jQuery instances I found:
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
I'm not 100% sure what the first one is since it's a local file but if it's file name is any indication...it's jQuery.
Long story short:
Delete this line:
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
and delete this line:
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
use this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
instead of all these three...
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
I think the Page is loaded the issue is with the smoothZoom zoom, If you see closely the image has been loaded but it is zoomed out completely
also change your
<img id="yourImageID" src="img/plan.jpg" width="86%" height="70%"/>
with
<img id="yourImageID" src="img/plan.jpg" style="width:86%; height:70%"/>
EDIT:
also your script has three jquery files included, you need to get rid of atleast of the them. select one file that you want to keep and move it to the top
I will suggest you to keep
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
move the file to the root and move the line to the top
++ <script src="jquery-1.9.1.min.js"></script>
-- <script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script type='text/javascript' src='./js-disclaimer/jquery.simplemodal.js'></script>
<script type='text/javascript' src='./js-disclaimer/basic.js'></script>
<script src="./js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="./js/custom.js" type="text/javascript"></script>
-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
-- <script src="zoom_assets/jquery-1.9.1.min.js"></script>
<script src="zoom_assets/jquery.smoothZoom.min.js"></script>
When script loads its unable to find the div id you have created because you are loading a img before the img dom elemnet is created
I appreciate all for the efforts ,however my problem got solved only once I validated the document using chrome validator.
I had used "%" to display the image width and height.I had to put some numeric values(as per need).Now its working fine.
But I am still wondering how can I make it fit to different screen size and resolutions ??