we have been given an assignment to make a div with a background image and couple of titles underneath and when you hover over a title it changes the background picture in the div ("thumbnail"). I am really new to jQuery and have no idea how to approach this. I tried the following code but it is not working.
<!DOCTYPE html>
<html lang="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<script>
$(function() {
$('ul a')
.mouseover(function() {
$('thumbnail').attr('src', this.getAttribute('data-image-src'));
})
.each(function() {
new Image().src = this.getAttribute('data-image-src');
});
}
</script>
<body class="body">
<!--Header-->
<header class="header">
<div class="logo">
<div class="logoimg"><img src="logo.png" width="80px" width="auto"></div>
</div>
<nav class="navbar">
About
Work
</nav>
</header>
<!--Main1-->
<div class="thumbnail"><img src="back1.jpg" width="auto" height="auto"></div>
<ul class="headlines">
link1
link2
link3
link4
</ul>
<!--Footer-->
<footer class="footer">
<p class="fotext">Copyright Vítek Linhart 2017. Don't steal my shit.</p>
</footer>
</body>
</html>
I appreciate any help :)
I guess this is the thing you're looking for. Not a tested code. You've missed to say that thumbnail is a class and also it can be a hover event from jquery (check api.jquery for examples)
<script>
$(function() {
$('ul a').hover(function() {
$('.thumbnail img').attr('src', $(this).data('imageSrc'));
});
});
</script>
You can make use hover event : https://api.jquery.com/hover/
See this example as well : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover
I solved it with this code. I wanted to ask though, if there is a possibility to make it animated. When the pictures switch make a fade animation.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$('a').on('mouseover', function() {
var iSrc = $(this).attr('data-image-src');
$('.thumbnail img').attr('src', iSrc);
});
});
</script>
Related
I am trying to have an alert popup when I hover over a hyperlink. I am trying to use JQuery and Javascript. I am not sure what I am missing in my code currently. The hyperlink is in an anchor inside the main. Any help would be greatly appreciated.
This is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House Music</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="javajam.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('main a').hover(function () {
alert("Concerts sell out quickly so act fast!");
}};
</script>
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li>Home;</li>
<li>Menu;</li>
<li>Music;</li>
<li>Jobs;</li>
</ul>
</nav>
<main>
<div id="heroguitar">
</div>
<h2>Music at JavaJam</h2>
<p>The first Friday night each month at JavaJam is a special night. Join us from 8 pm to
11 pm for some music you won't want to miss!</p>
<h4>January</h4>
<div class="details">
<img src="melaniethumb.jpg" height="80" width="80" alt="Melanie Morris" class="floatleft">
Melanie Morris entertains with her melodic folk style.
</div>
<h4> February</h4>
<div class="details">
<img src="gregthumb.jpg" height="80" width="80" alt="Melanie Morris" class="floatleft">
Tahoe Greg is back from his tour. New songs. New Stories.
</div>
</main>
<br>
<footer>
Copyright © 2016 JavaJam Coffee House<br>
brett#banich.com
</footer>
</div>
</body>
</html>
Your problem is simply some bracketing issues in the JS. Below is the amended code:
$(document).ready(function(){
$('main a').hover(function(){
alert("Concerts sell out quickly so act fast!");
});
})
Note: use F12 (dev tools) to find mistakes like these more easily
You didn't close the hover() function. The line after alert(...) should be:
})
});
Notice the closing parenthesis between the braces.
Your logic is correct but there is a typo - you didn't close braces correctly after your alert().
It should be -
$(document).ready(function () {
$('main a').hover(function () {
alert("Concerts sell out quickly so act fast!");
}); // updated
}); // added
I have a div that serves of container for a css animation that appears over the entire website's home page... a text and background that opens like curtains, revealing the website under it. It's like an intro landing page. The thing is I need it to appear only on first page load. I don't want it to appear on page refresh or if someone navigates thru the site and comes back to home page.
Can someone please show me how I would have to code this because I've search a lot on the web and didn't find any clear explanations for my particular case.
Here is the code for the div:
<div id="landContainer">
<div class="left-half" id="leftP"><article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article></div>
<div class="right-half" id="RightP"><article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article></div>
</div>
So the div I must display only on first page load would be the one with the ID landContainer, that contains a couple of other divs.
Since I'm new to this type of coding, I would need a complete example of the code I need to use with my div.
For Ian... here is the content of my index.html file...
<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
if (localStorage.getItem("pageloadcount")) { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
</body>
</html>
The best way is to use session through which you can determine if its a new request or old.
Server side session will be best here
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
I have read through the available links on this topic and they haven't helped.
I'm trying to get the following code to run. The "menu.html" loads the "world.html" in a div on another page, and the HTML comes up, but not the JavaScript.
At first I had the JS in a separate file, but when it wasn't running I moved it into "world.html", but it didn't fix the problem. I have also tried referencing jQuery.
This is menu.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</head>
<body>
<a id="infoButton" class="infoButton" href="info.html"></a>
<a id="bodyButton" class="bodyButton" href="body.html"></a>
<a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
<a id="leaveButton" class="leaveButton" href="leave.html"></a>
<a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
</body>
<footer>
</footer>
</html>
And preparePage.js, which gets rid of the menu and loads world.html:
function preparePage() {
document.getElementById("box").style.backgroundImage = "none";
$("#infoButton").fadeOut("slow");
$("#bodyButton").fadeOut("slow");
$("#leaveButton").fadeOut("slow");
$("#contactButton").fadeOut("slow");
$("#box").load("world.html", function enter() {
$("#enterButton").fadeOut("slow");
});
}
And last but not least, world.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function wut() {
window.alert("owo");
}
</script>
</head>
<body onload="wut(); return false;">
mhfkhgfhtfjhfjj<br><br>
<canvas id="gameBox" width="1000" height="500" style="background-color:#ffffff;"></canvas>
</body>
<footer>
</footer>
</html>
EDIT: Also including launchpad.html, which is the page containing the div in which menu.html and world.html load:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body onload="openGame(); return false;">
<div id="cloud"></div>
<div id="box" class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="openGame.js"></script>
</body>
<footer>
</footer>
</html>
And openGame.js, which changes the shape of #box and loads menu.html:
function openGame() {
$("#cloud").fadeOut("fast");
$("#box").animate({
height: '750px',
width: '1700px',
top: '100px',
left: '100px',
padding: '0px'
});
$("#box").load("menu.html");
document.getElementById("box").style.backgroundImage = "url('Images/menuBackground.png')";
}
I would use JQuery for the on-click events, and also make sure that all of the element id's that you reference in your script are present in the page. Another thing to check is that your scripts are loading properly, the letter casing of the file name is important on Linux servers.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</head>
<body>
<ul id="menu">
<li><a id="infoButton" class="infoButton" href="info.html">test1</a></li>
<li><a id="bodyButton" class="bodyButton" href="body.html">test2</a></li>
<li><a id="enterButton" class="enterButton">test3</a></li>
<li><a id="leaveButton" class="leaveButton" href="">test4</a></li>
<li><a id="contactButton" class="contactButton">test5</a></li>
</ul>
<div id="box" style="width:500px; height:500px; background-color:#FFF; background-image:url(http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a);">
test box
</div>
<footer>
</footer>
</body></html>
Javascript:
$( document ).ready(function() {
$( "#enterButton" ).click(function() {
document.getElementById("box").style.backgroundImage = "none";
$("#infoButton").fadeOut("slow");
$("#bodyButton").fadeOut("slow");
$("#leaveButton").fadeOut("slow");
$("#contactButton").fadeOut("slow");
$("#box").load("/zalun/VkCyH/app.html", function enter() {
$("#enterButton").fadeOut("slow");
})
})
});
Live example: https://jsfiddle.net/ucjs77L8/
Apart from the obvious fact that you don't have an element with the id box, please realise that the jQuery load method will not trigger the onload callback that you have defined in world.html. So you'd need to call that yourself.
So fix two things:
define box, e.g.
<div id="box"></div>
call wut(), from menu.html:
$("#box").load("world.html", function enter() {
wut();
$("#enterButton").fadeOut("slow");
});
The onload= in world.html has no effect when loaded like this, because to the browser there is only one document, which already has loaded. So, there is no second load event triggering.
Alternatively you could just add a script in world.html, near the end just before the closing </body> tag, which will run:
<script>
wut();
</script>
Got a bit of a problem... basically using this statement in html with a ul menu to activate it.....
<div id="subnav" >
<ul>
<li id="subone">Definitions</li>
</ul>
</div>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#subnav ul li a") .click(function(e){
e.preventDefault()
$('#content2').load($(this).attr('abc.html') + ' #content2');
});
});
</script>
<div id="content2">
</div>
......... This does nothing and can't seem to work out why....Can someone please tell me where I am wrong here. BTW the abc.html page simply has ....
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="whatis.css" />
</head>
<body>
<div id="content2"><p>this is a test </p></div>
<div id="content3"><p>Here comes some content </p></div>
</body>
</html>
any ideas people ??
cheers,
Greg.
Try this:
$('#content2').load('abc.html #content2');
.attr('abc.html') attempts to return the value of the attribute abc.html... so that would work if your a looked like this:
<a abc.html="something">Definitions</a>
(though that wouldn't be a valid attribute)
Now if your a looked like this:
Definitions
You could do this:
$("#subnav ul li a") .click(function(e){
e.preventDefault()
$('#content2').load($(this).attr('href') + ' #content2');
});
I am making a jeopardy game. When I click a div I want to do some effect on it. However, I can't even get a simple .hide to work. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jeopardy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customStyles.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/flip.js"></script>
</head>
<body>
<div class ="container">
<div class="row">
<div class="prizeAmount">
<div class="span2">
<h3 id="test">100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
</div>
</div>
</div><!--close container-->
</body>
</html>
javascript
$(function() {
$('#span2').click(function() {
$(this).hide(400);
/*$('#span2').hide(400); <--tried this also */
});
});
I've used jquery to animate navigation on a site before. Am i missing something obvious?
Your
$('#span2') // id selector
Should be
$('.span2') // class selector
Since it's a class
Your problem is that you are using the hash # which is the id selector instead of the class selector which is a dot ..
Try
$(function() {
$('.span2').click(function() {
$(this).hide(400);
});
});
You might want to read up more on the different jQuery Selectors on the official documentation
You dont have any elements with ID "span2", they are all CLASS=span2.
Try this:
$(function() {
$('.span2').click(function() {
$(this).hide(400);
});
});
Note: this will effect ALL elements with the class "span2" if you don't want that behavior, then use ID="span2" for a single element, and use unique names for each.