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>
Related
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 need to convert this working filter gallery from JavaScript JQuery. I'm a complete novice in both these languages so I was hoping someone could give me a little help. Below is the JavaScript that will have to be converted,
(function() {
var filterButtons = document.querySelectorAll(".filterList a");
imageNodes = document.querySelectorAll("img");
console.log(filterButtons, imageNodes);
function staggerImage() {
TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
function doImageSwitch(event) {
console.log("fire");
console.log(event.target.parentNode.id);
for(i=0; i<imageNodes.length; i++) {
imageNodes[i].style.display = "inline";
if(!imageNodes[i].classList.contains(event.target.parentNode.id)) {
imageNodes[i].style.display = "none";
}
}
staggerImage();
}
[].forEach.call(filterButtons, function(el) {
el.addEventListener("click", doImageSwitch, false);
});
staggerImage();
})();
And this is the HTML code I have set up,
<?php
include './includes/functions.php';
$conn = connect($config);
$result = mysqli_query($conn, "SELECT * FROM main_content");
//echo mysqli_num_rows($result); ?>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Filter Gallery</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Something</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button with Dropdown
<ul class="dropdown filterList">
<li id="flower">Flower </li>
<li id="puppy" >Puppy </li>
<li id="kitten" >Kitty </li>
</ul>
</li>
</ul>
</section>
</nav>
<div class="row">
<div class="small-12 columns text-center">
<div class="images">
<?php
while($row = $result -> fetch_assoc()) {
echo "<img class=\"{$row['img_class']}
img-responsive\" src=\"img/{$row['img_src']}\"
alt=\"{$row['img_alt']}\">";
}
?>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script src="js/myScript.js"></script>
</body>
</html>
Any help would be greatly appreciated. Thank you!
Did you write the javascript code yourself? If so it should not be a problem finding the answer. StackOverflow is as said not a coding service. I can try to help you, but I will not be wasting time on this question if it's for homework or some programming job ;)
If you first try to convert the code, I will be happy to help you (try).
the following uses an html structure that is presumably the same as your php echo output.
(function() {
// Selecting all of the img tags within the document that have to be changed
var imageNodes = $(".images img");
// TweenMax syntax stays the same
function staggerImage() {
TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
$(".filterList a").on("click", function(e) {
console.log("fire");
// parent() - http://api.jquery.com/parent/
//console.log('This: %o - Parent - %o - ParentId - %o', $(this), $(this).parent(), $(this).parent().attr("id"));
var parentId = $(this).parent().attr("id");
// [parentId] will be used as a scoped variable on the nested anonymous function declared in [.each] below.
// .each([array],func) | [array].each(func) - http://api.jquery.com/jquery.each/
$(imageNodes).each(function(index, value) {
console.log("index: %o | value: %o | parentId: %o", index, value, parentId);
// .hasClass([string]) - http://api.jquery.com/hasclass/
if($(value).hasClass(parentId))
{
$(value).css("display","inline");
} else {
$(value).css("display","none");
}
});
staggerImage();
});
staggerImage();
})();
img {width:5em; height:5em;border:0.1em solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Something</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button with Dropdown
<ul class="dropdown filterList">
<li id="flower">Flower </li>
<li id="puppy" >Puppy </li>
<li id="kitten" >Kitty </li>
</ul>
</li>
</ul>
</section>
</nav>
<div class="row">
<div class="small-12 columns text-center">
<div class="images">
<img class="flower img-responsive" src="img/test.png" alt="flower 1" />
<img class="flower img-responsive" src="img/test.png" alt="flower 2" />
<img class="puppy img-responsive" src="img/test.png" alt="puppy 1" />
<img class="flower img-responsive" src="img/test.png" alt="flower 3" />
<img class="kitten img-responsive" src="img/test.png" alt="kitten 1" />
<img class="puppy img-responsive" src="img/test.png" alt="puppy 3" />
</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/1m4LmLhx/1/
pastebin: http://pastebin.com/bfDL5NLU
Note: when you click on the hyperlinks, that we've attached click event handlers to, the viewport is being directed back to the top of the page.. this is usually undesirable, but it seems to be outside of the scope of this question to address that behavior.
Using HTML5 and jQuery, I would like to implement JPlayer (from www.jplayer.org).
Unfortunately, I cannot make it work the way I would like. In the end, my problem seems to be an issue of stylesheet "inclusion". For some reason I do not understand, the stylesheet does not work properly when using "jQuery appendTo head" instead of a "html link". The file is definetely included but the GUI is messed up when firing a javascript action.
I have attached both examples which can be used anywhere for testing. I made comments on the only lines which are different.
Here is the first file. This example is working as expected:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Test with link rel</title>
<!-- ONLY DIFFERENCE IS THIS LINE -->
<link rel="stylesheet" type="text/css" href="http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" />
<!-- END -->
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>Cro Magnon Man</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
<script type="text/javascript">
$("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});
</script>
</body>
</html>
The second file which is not properly working:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Test with jquery appendTo</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>Cro Magnon Man</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
<!-- ONLY DIFFERENCE IS THES LINES -->
<script type="text/javascript">
$("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});
$('<link>', { rel: 'stylesheet', type: 'text/css', href: 'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css' }).appendTo('head');
</script>
<!-- END -->
</body>
</html>
The stylesheet IS working on the second file, but as soon as you click something on the player, the GUI is messed up. Why is that? Could I make some changes to the provided jPlayer stylesheets to make it work with my second example?
This should fix your issue, calling plugin once CSS file is loaded:
$('<link>', {
rel: 'stylesheet',
type: 'text/css',
href: 'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css'
}).one('load', function () {
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"
});
},
supplied: "m4a",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true
});
}).appendTo('head');
Although, this could be enough in most cases:
$('<link>', { rel: 'stylesheet', type: 'text/css', href: 'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css' }).appendTo('head');
$("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});
I have an ASP.Net with C# application.I want to have a menu and when i am with the mouse on a menu i want to show a div where i have some informations:a title,and some other options on two columns .
I wrote a Javascript method from where I want to make visible the corresponding div ,but it doesn't find my div section (it's always null) .
Can somebody tell me what's the problem ?
Below is the code.
I am begginer in ASP.Net,Javascript.Do you know an other method,better , for doing that ?(with an example please if you have)
My asp.net page :
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Sales_Site.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/Menu.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="menu" >
<ul id="main-nav">
<li>Books
<div class="main-nav-sectionBooks" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
<div class="main-nav-section-left" style="float:left;width:200px;height:100px">
Books Categories :
<ul><li>Subcateg1</li></ul>
<ul><li>Subcateg2</li></ul>
<ul><li>Subcateg3</li></ul>
</div>
<div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
Test 123
</div>
</li>
<li>Music
<div class="main-nav-sectionMusic" runat="server" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
<div class="main-nav-section-left" style="float:left;width:200px;height:100px">
Music Categories :
<ul><li>Subcateg Music 1</li></ul>
<ul><li>Subcateg Music 2</li></ul>
<ul><li>Subcateg Music 3</li></ul>
</div>
<div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
Test 123
</div>
</li>
<li>Clothing
<div class="main-nav-sectionClothing" runat="server" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
<div class="main-nav-section-left" style="float:left;width:200px;height:100px">
Clothing Categories :
<ul><li>Subcateg Clothing 1</li></ul>
<ul><li>Subcateg Clothing 2</li></ul>
<ul><li>Subcateg Clothing 3</li></ul>
</div>
<div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
Test 123
</div>
</li>
</ul>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
<div class="footer">
</div>
</div>
<script type="text/javascript" language="javascript">
function Show(type) {
HideControl("main-nav-sectionBooks");
HideControl("main-nav-sectionMusic");
HideControl("main-nav-sectionClothing");
var ControlName = "main-nav-section" + type;
alert(ControlName);
var control = document.getElementById(ControlName);
if (control) {
control.style.display = 'block';
control.style.visibility = 'visible';
}
else
alert("null");
}
function HideControl(controlName) {
var control = document.getElementById(controlName);
if (control) {
control.style.display = 'none';
control.style.visibility = 'hidden';
}
}
</script>
</form>
I would just do this with CSS:
EXAMPLE
http://jsbin.com/oreqew/1/edit
HTML:
<div class="page">
<div class="header">
<div class="menu" >
<ul id="main-nav">
<li>Books
<div class="main-nav-sectionBooks" style="width:400px;height:250px;border:1px solid Blue;">
SOMETHING
</li>
</ul>
</div>
</div>
</div>
CSS:
.main-nav-sectionBooks{
display:none;
}
#main-nav li:hover div.main-nav-sectionBooks{
display:block;
}
Your problem is very simple, you do not have any "id" value with your elements, you have class attribute like class="main-nav-sectionBooks". if you add id attribute to your elements you will succeed.
Best Regards,
You should give the divs you want to show the ID isntead of class you did now.
<div class="main-nav-sectionClothing" runat="server" style...
to
<div id="main-nav-sectionClothing" runat="server" style...
That is because with your Javascript code you are trying to fetch an element of the page by id with getElementById().