I created a dynamically load page using iframe. When it load, it show empty space in the body area until i click page links. How to add default page when i frame load.
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".divlink").click(function(){
$("#content").attr("src" , $(this).attr("ref"));
});
});
</script>
</head>
<body>
<iframe id="content"></iframe>
<a href="#" ref="page1.html" class="divlink" >Page 1</a><br />
<a href="#" ref="page2.html" class="divlink" >Page 2</a><br />
<a href="#" ref="page3.html" class="divlink" >Page 3</a><br />
<a href="#" ref="page4.html" class="divlink" >Page 4</a><br />
<a href="#" ref="page5.html" class="divlink" >Page 5</a><br />
<a href="#" ref="page6.html" class="divlink" >Page 6</a><br />
</body>
</html>
Please check below snippet. In this case it will load page from the first 'a' element.
$(document).ready(function(){
$("#content").attr("src" , $("a.divlink:first").attr("ref"));
$(".divlink").click(function(){
$("#content").attr("src" , $(this).attr("ref"));
});
});
Use the iframe src property
<iframe id="content" src="page1.html"></iframe>
Related
I have 3 gallery column which is "Gallary 1", "Gallary 2", "Gallary 3". Each gallery has more than 5 images collection.
Now, What I am doing is, When the user clicked on gallery 1 then it should be displayed only gallery one image, When the user clicked on gallery 2 then it should be displayed only gallery two images and so on.
I checked on google for the plugin but I haven't found.
Now, I am using http://sachinchoolur.github.io/lightGallery/ plugin
$(document).ready(function() {
$('.lightgallery').lightGallery({
thumbnail: false
});
});
.lightgallery a img{width: 300px;}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.css">
<div class="lightgallery">
<a href="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg">
<img src="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg" />
</a>
<a href="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg">
<img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg" />
</a>
<a href="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg">
<img src="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg" />
</a>
<a href="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png">
<img src="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png" />
</a>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
Above snippet is working for a single gallery section because it's displaying all the images.
Any other plugin is available for my issues?
I tried some my thought that I will created like below code and using css
.lightgallery a{position: absolute;} all the anchor tag images will display over the first image but this is not the right way. right?
<div class="lightgallery"><!--gallary one images--></div>
<div class="lightgallery"><!--gallary two images--></div>
<div class="lightgallery"><!--gallary three images--></div>
Loop each lightgallery div and create the gallery
$(document).ready(function() {
$('.lightgallery').each(function(i, v) {
$(v).lightGallery({
thumbnail: false
});
});
});
.lightgallery a img {
width: 300px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.css">
<div class="lightgallery">
<a href="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg">
<img src="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg" />
</a>
<a style="display:none;" href="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg">
<img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg" />
</a>
</div>
<div class="lightgallery">
<a href="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg">
<img src="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg" />
</a>
</div>
<div class="lightgallery">
<a href="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png">
<img src="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png" />
</a>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
I am trying to adjust the side image of a site, each button should change the image to a different src, I tried this:
$(document).ready(function(){
$("#introID").hover(function(){
$("#frame").attr("src", "newImage.png");
});
});
and a few other variations but for some reason the jquery is not catching ? Or perhaps it is something with my syntax? From my inderstanding i just have to
Here is my html:
<html>
<head>
<meta charset="utf-8">
<title>CAPP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
$(document).ready(function(){
$("#introID").hover(function(){
$("#frame").attr("src", "assets/images/much-more-than-gasoline.png");
});
});
</script>
<body>
<div id="logodiv">
<img id="logo" src="logo.png" alt="logo"/>
</div>
<div id="h1s">
<img src = "Origionalimage.png" id="frame"/>
<div class="h1padding"></div>
<a class = "h1" href="" id="introID">Intro</a>
<div class="h1padding"></div>
<a class = "h1" href="">ON THE <span class="light">SURFACE</span></a>
<div class="h1padding"></div>
<a class = "h1" href="">From <span class="light">ore to oil</span></a>
<div class="h1padding"></div>
<a class = "h1" href="">Environmental <span class="light">care</span></a>
<div class="h1padding"></div>
<a class = "h1" href="">Much more than <span class="light">gasoline</span></a>
<div class="h1padding"></div>
<a class = "h1" href="">One more <span class="light">thing</span></a>
</div>
</body>
Thanks in advance :)
You must not embed your own script inside a script tag if the src attribute is set.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#introID").hover(function(){
$("#frame").attr("src", "assets/images/much-more-than-gasoline.png");
});
});
</script>
That should do the trick. Here you will find more information.
I want to replace all links which are inside a specific DIV using JavaScript.
For example
<div class="div01">
<div class="div02">
<a href="www.oldlink.com">
<img src="myimage.jpg" class="imageclass">
</a>
</div>
<a class="link02" href="www.oldlink2.com">
<div class="div03">
<h5>My Heading</h5>
</div>
</a>
Now I want to replace www.oldlink.com and www.oldlink2.com with my one new link like www.mynewlink.com. Actually I am using WordPress and do not want to edit it using PHP. I am using a plugin Header and Footer Script to do this.
https://wordpress.org/plugins/header-and-footer-scripts/
Try this:
const div1 = document.querySelector('.tg-one-fourth');
div1.querySelectorAll('a').forEach(a => a.href = '//www.mynewlink.com');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="tg-one-fourth">
<div class="div02">
<a href="www.oldlink.com">
<img src="myimage.jpg" class="imageclass">
</a>
</div>
<a class="link02" href="www.oldlink2.com">
<div class="div03">
<h5>My Heading</h5>
</div>
</a>
</div>
</body>
</html>
I'm using ChillBoxs Jquery plugin with more images on my website but when window is ready I want one of that all images load as pop up images without any clicking from visitor.
Issue I can't call one of those images for the first pop up when window has already load.
Here is my JS ChillBoxs
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>
<script type="text/javascript">
$(function(){
$('[rel$=ChillBox]').ChillBox();
});
</script>
</head>
<body>
And here is images
<a href="images/a1.jpg" rel="ChillBox" >
<img src="images/a1.jpg" />
</a>
<a href="images/a2.jpg" rel="ChillBox" >
<img src="images/a2.jpg" />
</a>
<a href="images/a3.jpg" rel="ChillBox" >
<img src="images/a3.jpg" />
</a>
<a href="images/a4.jpg" rel="ChillBox" >
<img src="images/a4.jpg" />
</a>
<a href="images/a5.jpg" rel="ChillBox" >
<img src="images/a5.jpg" />
</a>
try adding a simple click trigger:
$(function(){
var $chill = $('[rel$=ChillBox]')
$chill.ChillBox();
$chill.first().click();
});
My problem is the .click event below. The 'nav' and '#closemenu' div hide as expected on document ready, but the click event won't work to save my life. Either I'm missing something embarrassingly small (which I hope is unlikely because I copy/pasted the code from the jQuery API page and then changed only the ID and alert) or else I have no idea what my issue is. Any help is much appreciated.
Here's my code:
$(document).ready(function() {
$('nav').hide();
$('#closemenu').hide();
$('#menuicon').click(function() {
alert('Hello, test');
});
});
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<h1>Page Title Here</h1>
<div id="menuicon">
<img src="mobile_menu.png">
</div>
<nav>
<ul>
<a href="">
<li class="upCase">Projects</li>
</a>
<a href="">
<li clas s="upCase">Profile</li>
</a>
<a href="">
<li class="upCase">Contact</li>
</a>
</ul>
</nav>
<div id="closemenu">
<p>X</p>
</div>
</header>
</body>
Why don't you just add the event directly like this
For multiple div use the below
$( "#menuicon" ).bind({ click: function(){ alert ();}
});