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
Related
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>
The final outcome I want to have is "Todays Beer Style is: "Beer Style". When I enter the javascript code, the "Todays Beer Style is:" disappears. I am not sure why. Below is the code.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The Homebrewery
Author: Chris Stastny
Date: October 27th, 2015
-->
<meta charset="utf-8">
<title>The Homebrewery - Homebrewing</title>
<meta name="description" content="The Homebrewery - Homebrewing">
<meta name="author" content="Chris Stastny">
<link href="final.css" rel="stylesheet" type="text/css" />
<script src="modernizr-1.5.js"></script>
<script src="beerStyle.js"></script>
</head>
<header>
<h1> The Homebrewery</h1>
<nav>
<ul>
<li>About</li>
<li>Equipment</li>
<li>Brew Log</li>
<li>Links</li>
<li>Newsletter</li>
</ul>
</nav>
</header>
<body>
<h2>Greetings!</h2>
<div id="dateBox">
Today Beer Style is:
<script>
document.getElementById("dateBox").innerHTML=style[new Date().getUTCDate()];
</script>
</div>
<br>
<img src="beer.jpg" alt="beer">
<p>This website was built to keep people informed about my homebrewing adventures. It will have brewday pictures, videos (possibly) in the future, recipes and general homebrewing information. There is also a newsletter that you can sign up for that will go into more detail about what is going on with my brewing.</p>
<br>
<footer>The Homebrewery - Homebrewing - 2015</footer>
</body>
</html>
When you do this:
document.getElementById("dateBox").innerHTML=style[new Date().getUTCDate()];
You are replacing everything inside that div with what you are trying to add
try:
document.getElementById("dateBox").innerHTML += style[new Date().getUTCDate()];
Change
<div id="dateBox">
Today Beer Style is:
<script>
document.getElementById("dateBox").innerHTML=style[new Date().getUTCDate()];
</script>
</div>
to:
<div id="dateBox">
Today Beer Style is: <span id="beerStyle"></span>
<script>
document.getElementById("beerStyle").innerHTML=style[new Date().getUTCDate()];
</script>
</div>
You're replacing the entire div, including the preamble. Better to have a span that's just the replaceable text:
Today Beer Style is: <span id="beerStyle"></span>
then
document.getElementById("beerStyle").innerHTML=style[new Date().getUTCDate()];
I want to have a swipe function in my first html page of the mobile application that I am implementing. I use Phonegap 2.9 and Eclipse. For this function, I used from this files the Page_scrolling.html and the JavaScripts it calls.
My head in .html file that I want to have the swipe function:
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Guide-Me For-All</title>
<link href='http://fonts.googleapis.com/css?family=Patrick+Hand|Permanent+Marker|Exo|Nunito|Limelight|Ubuntu|Montserrat|Audiowide|Architects+Daughter' rel='stylesheet' type='text/css'>
<!-- import stylesheets -->
<link rel="stylesheet" type="text/css" href="../../css/home/home.css">
<link rel="stylesheet" type="text/css" href="../../css/home/home-eng-fonts.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link rel="stylesheet" href="../../jQuery-Mobile-Bootstrap-Theme-master/themes/Bootstrap.css">
<!-- <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" /> -->
<link href="css/main.css" type="text/css" rel="stylesheet" />
<!-- import js -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="../../jss/connect.js"></script>
<script type="text/javascript" charset="utf-8" src="../../jss/home/change_page.js"></script>
<script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script type="text/javascript" src="../../plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="../../plugins/js/main.js"></script>
<script src="../../plugins/swipe.js"></script>
According to the link, I needed the last .css link and the last four .js links. The forth JavaScript is the one that is inside the Page_scrolling.html in the tutorial I put above. The only file that I changed, is the last JavaScript:
My Swipe.js contains :
$(function() {
$("#trust_us").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
$("#how_it_works").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
$("#owners").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
$("#sign_up_in").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
//Swipe handlers.
function swipe1(event, direction, distance, duration, fingerCount) {
$(this).text( "You have swiped " + direction +' with ' + fingerCount +' fingers' );
}
function swipe2(event, phase, direction, distance) {
$(this).text( phase +" you have swiped " + distance + "px in direction:" + direction );
}
});
//{ swipeStatus:swipe2, allowPageScroll:"horizontal"}
My body file is divided in the divs I want to swipe:
<body>
<div id="logo">
<img id="lg" src="../../imgs/logo.png" alt="Logo">
</div>
<div id="trust_us">
<div id="trust_us_h2">
<h3>Why you should trust us :</h3>
</div>
<ul>
<li><p>All the info about the shops, are being validated with their owners.</p></li>
<li><p>You can send your thoughts or complaints to the shops' owners, so that they will do improvements to it. *</p></li>
</ul>
<div id="notice">*Only for occasions when there was a contact between administrator - shop's owner!</div>
</div> <!--trust us-->
<div id="how_it_works">
<div id="how_it_works_h2">
<h3>How it works :</h3>
</div>
<div id="first">
<h5>First:</h5>
</div>
<div id="Sign_Up" class="float-left">
<img src="../../imgs/1sign-up.png" alt="Sign-Up">
<p> 1. Register</p>
</div>
<div id="Rate" class="float-right">
<img src="../../imgs/5rate.png" alt="Rate">
<p>5. Rate it according to your experience</p>
</div>
</div> <!--how it works-->
<div id="owners">
<div id="owners_h2">
<h3>For the owners of a shop :</h3>
</div>
<ol>
<li><p>Register</p></li>
<li><p>After that, you can take interesting reports and useful statistics about your shop. *</p></li>
<li><p>Now, you can do improvements to your shop according to what the customers need so you can get even more of them.</p></li>
</ol>
<div id="notice">*Contact the admin of the app for more information.</div>
</div> <!--owners-->
<div id="sign_up_in">
<h2>...REGISTER NOW OR SIGN IN...</h2>
Sign-Up Now!
</div>
<div id="last_line">
<br>
</div>
<div id="footer">
<p>Copyright (c) 2014 Guide-Me For-All. Design by Marialena S.</p>
</div>
</body>
What Is happening right now, Is when I swipe to the left or to the right a div, it disappears and in it's place it appears a message. And all the divs are in a vertical row. There are all viewable from the start when you scroll the page. What I want now, is when I swipe to the right the first div for example, to display the second div. In the same way I want to do the swipe to left function to display the previous div. That's all. I tried many other options but this looks the most simple.
I couldn't find the solution to my problem but I found this very nice tutorial and it's really simple to to do the swipe function. But if anyone finds my mistakes to the above code, please post the answer so that I can learn how to do the swipe function with this method too.
I have used this method to make a slider popping up when clicking on a button:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
I have made my own button for it + some other changes. However — i have struggled for 2 days now, trying to figure out how to be able to move my button out of the div it was in the original script.
Because; when i move it out of the original div, tat looks like this:
<div id="slidebottom" class="slide">
It simply stops working.
At first i thought it had something to do with the fact that the ID that started the slider animation, was defined as '(this')
So i ran a 'test' to figure out the ID that 'this' was and replaced it with that.
But still; nothing happens when i move it into another div.
I can move it out of all divs just below the 'body' tag — and there it will work as well.
Here is the html-part
<div id="slidebottom" class="slide">
<img src="xxx.jpg">
</div>
And here is the javascript:
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#hotels').next().slideToggle();
});
});
</script>
I am a rookie when it comes to javascript, so please forgive me if this is dumb question.
Just to sum up; i just want to be able to move my button somewhere else than this one particular div.
I hope I get it in total, so...
Your slider is based on next(), which means: starting at $("#hotels"), the function is binding the sliding functionality to the element directly after $("#hotels") - literally the next element, and ONLY the next element.
If the element you want to toggle is moved to another position in your HTML, the function will stop working, because it strictly refers to a position in the HTML, not to a designated element (like it would be done by a query selector).
Maybe you could post your whole HTML?
And thank you for answering.
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--*********** Aktivere CSS3 selectors i IE 7 & 8 ***********
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<![endif]-->
<title></title>
<!--*********** CSS ***********-->
<link href="../../css/dev_brokop_em.css" rel="stylesheet" type="text/css"/>
<!--
<link href="../../css/mediumstyles.css" media="only screen and (min-width: 768px)" rel="stylesheet" type="text/css"/>
<link href="../../css/smallstyles.css" media="only screen and (min-width: 610px)" rel="stylesheet" type="text/css"/>
-->
<link href="../../css/jquery.fullPage.css" rel="stylesheet" type="text/css"/>
<!--*********** JS ***********-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.fullPage.js"></script>
<!--*********** Aktivere Media Queries i IE 7 & 8 ***********-->
<script src="../../js/respond.min.js"></script>
</head>
<body id="em">
<div id="fullpage">
<div class="section" id="bg">
<!--************ Bottom Logos ************-->
<div id="circlesbottom">
<img src="../../img/experience_meetings/em_circles.png" border="0">
</div>
<div id="logobottom">
<img src="../../img/experience_meetings/em_logo.jpg" border="0" width="100" height="100">
</div>
<img id="pic" class="portrait" src="../../img/experience_meetings/hotels_off.png" border="0" width="100" height="100">
<div id="content">
<div id="movie_button">
<img src="../../img/experience_meetings/em_button_movie.png" width="90" height="90" border="0">
</div>
<div id="content_inside">
<h1>EXPERIENCE MEETINGS</h1><br>
<h2>Daectisquia volum velent audam dit qui adipiet pra posaepe liaspidebite veliqui vendit plia nus con nectur?Aqui berum que ommolenis quiasperum eturepe sunt alit exped quassunt prestem quam aut reiunt quae volupitatet omnient ma exerisq uundam fuga. Nem. Itatecatur, officiu reicietur?</h2>
</div>
</div>
<!--************* Slidebottom ************-->
<div id="slidebottom" class="slide">
<div id="inner">
<div id="bottomslider_wrapper">
<div id="bottomslider_content_01">
<h1>DANMARK</h1>
</div>
<div id="bottomslider_content_01">
<h1>SVERIGE</h1>
</div>
<div id="bottomslider_content_01">
<h1>NORGE</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--************** Turn Hotel button on and off ************-->
<script type="text/javascript">
var newsrc = "hotels_on.jpg";
function changeImage() {
if ( newsrc == "hotels_on.jpg" ) {
document.images["pic"].src = "../../img/experience_meetings/hotels_on.png";
document.images["pic"].alt = "hotels_on";
newsrc = "hotels_off.jpg";
}
else {
document.images["pic"].src = "../../img/experience_meetings/hotels_off.png";
document.images["pic"].alt = "hotels_off";
newsrc = "hotels_on.jpg";
}
}
</script>
<!--************* Bottom slider ****************** -->
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#hotels').next().slideToggle();
});
});
</script>
<!--*********** fullpage.js ***********-->
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
</body>
</html>
I managed to work it out with the help of your logic. Here is the code i ended up with.
Thank you all for great help! :)
<div id="slidebottom" class="slide">
<div id="inner">
<div id="bottomslider_wrapper">
<div id="bottomslider_content_01">
<h1>DANMARK</h1>
</div>
<div id="bottomslider_content_01">
<h1>SVERIGE</h1>
</div>
<div id="bottomslider_content_01">
<h1>NORGE</h1>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#inner').slideToggle();
});
});
</script>
So, as you can see I amusing javascript to show/hide elements, however when you click the .png it shows the text but does not hide the other element's text. I have been going over and over this script and Google searching the hell out of it and I cannot come up with an answer. I think I need another pair of eyes, so if anyone takes a look at this let me know if there are errors or if I'm missing some code.
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<div class="content">
<section class="left">
<p>
<img src="character1.png" id="char1" />
</p>
<p>
<img src="character2.png" id="char2" />
</p>
</section>
<section class="right">
<span id="character1" style="display: none;">Show character1 information</span>
<span id="character2" style="display: none;">Character 2 information</span>
</section>
</div>
</body>
</html>
<a href="#" onclick="showStuff('character1');" onclick="hideStuff('character2');">
On this line, you first set the property onclick to showStuff('character1'), then you reassign it to hideStuff('character2').
So, you should wrap these two function calls into one function and then assign that function to onclick.
onclick="function() { showStuff('character1'); hideStuff('character2'); }