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.
Related
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>
Has anyone tried html jquery load file? How can I possibly use Jquery to control a class from a Html that's loaded from Jquery? A direct content of my header html will work if inserted into index.html. However I'm trying to use the Jquery include file as there will be a lot of pages so a separate file is much more feasible. The problem is when I target a certain class or id in js it won't do anything.
index.html
<!DOCTYPE html>
<html>
<body>
<div id="header"></div>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/jquery.superslides.js" type="text/javascript" charset="utf-8"> </script>
<script src="js/app.js"></script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
</body>
</html>
header.html
<header>
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
Managed to fix with a different approach.
index.html
<!DOCTYPE html>
<html>
<link rel="import" id="template-file" href="header.html">
<body>
<script>
var getImport = document.querySelector('#template-file');
var getContent = getImport.import.querySelector('#header');
document.body.appendChild(document.importNode(getContent, true));
</script>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/app.js"></script>
</body>
</html>
header.html
<header id="header">
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
I'm not sure if this is correct or not $('#bigImage').attr("data-big", LargeImagePath); But the same statement work fine for 'src'.
IE. on JSP I get the value of mediumImagePath but not large may .attr will not use in case of data-big so what should I use for data-big.
xyz.js
function getImageDetails(mediumImagePath, LargeImagePath) {
alert(mediumImagePath+"_______"+mediumImagePath);
jQuery.ajax({
type : 'GET',
url : 'productDetailsPage.do',
data : {},
success : function(data) {
$('#bigImage').attr("src", mediumImagePath);
$('#bigImage').attr("data-big", LargeImagePath);
alert(data);
$("#productListPage").hide();
$("#productDetailsPage").show();
}
});
}
This is the div where where I'm trying to set those values:
Abc.Jsp
<div class="view-product">
<img id="bigImage" class="fancybox" src=""
data-big="images/home/suitlarge.jpg" />
<h3>ZOOM</h3>
</div>
Productdiv.jsp
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div>
<c:forEach items="${products}" var="products">
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="${products.smallImage}" onclick="getImageDetails('${products.mediumImage}', '${products.largeImage}');" alt="${products.productId}productImage" />
<h2>${products.allPrice}</h2>
<p>${products.name}</p>
</div>
</div>
<ul class="nav nav-pills nav-justified">
<li><a href=""><i class="fa fa-plus-square"></i>Add to
Wishlist</a></li>
</ul>
</div>
</div>
</c:forEach>
</div>
Please help and explain what's wrong.
When you want to access the data attribute you should use data and NOT attr
So your code should be something like $('#bigImage').data("big", LargeImagePath);
Here's a complete example:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var big = $("#bigImage").data("big");
alert(big);
});
</script>
</head>
<body>
<img id="bigImage" class="fancybox" src="" data-big="images/home/suitlarge.jpg" />
</body>
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 ();}
});