I'm new to jquery and I don't want to end up doing the wrong thing, I've done everything else but, I'm stuck on this part. How do I hook this is up? I've tried using script tags, but I'm not sure if thats right.
$(document).ready(function() {
$('.menu').dropit()
});
Ok I've done what you guys suggested, but it still does not seem to work.
Heres the full code:
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
<script src="dropit.js"></script>
<link rel="stylesheet" href="dropit.css" type="text/css" />
<style>
body
{
background:url("");
background-size:0px 0px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
<STYLE>
<!--
a:hover{color:#c0c0c0;}
-->
</STYLE>
<style>
.navLink {
color: #000000;
text-decoration: none !important;}
ul
{
list-style-type:none;
font-size: SMALL;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: lighter;
font-style: regular;}
li
{
display:inline;
}
</style>
</head>
<body>
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="70">
<HR COLOR="#C0C0C0" WIDTH="100%">
<ul id="nav" >
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="450" height="1"> <li><a href="#">
MENS
<ul>
<li>Shirts</li>
<li>Jackets</li>
<li>Denim</li>
<li>Fleece</li>
</ul>
</li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>WOMEN'S</li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>NEW ARRIVALS
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>BLOG
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>SALE
</ul>
<HR COLOR="#C0C0C0" WIDTH="100%">
<ul id="nav" >
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="0" height="2">
<p><p align="center"><img border="0" src="http://img593.imageshack.us/img593/6192/5eo7.png" alt="Vealed" width="800" height="500">
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="70" height="2">
</ul>
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="200"
<script type="text/javascript">
$(document).ready(function() {
$('.menu').dropit();
});
</script>
</body>
</html>
I wanted to make it so that all the links in the menu will have a drop down.
Put the script tag in between your head tags like so
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>
put this right before the closing body tag like so
<script type="text/javascript">
$(document).ready(function() {
$('.menu').dropit();
});
</script>
</body>
Another option, instead of putting your jQuery code at the bottom, is to put all your javascript/jquery in a separate file. And then just link to it.
For example
<script type="text/javascript" src="myjsfilename.js"></script>
</body> //again, you put this right before the closing body tag
And then in your myjsfilename.js file, you would have
$(document).ready(function() {
$('.menu').dropit();
});
plus anymore javascript/jquery code you want to add
Doing it that way can help keep things organized
Add a script tag like this to the head or body of your html:
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
as far as best practices go for where to add it, check here for a good discussion:
Where should I put <script> tags in HTML markup?
The first script tag above links to a CDN, and allows you to include jQuery without having to have it locally. This is a great way to do it as long as you dont include many external scripts. Once you have many scripts it would be better to include everything in a local minified file to increase page load performance.
I drew a small diagram to help anyone understand the answers visually.
As a rule of thumb, I recommend putting all scripts at the bottom for performance issues.
It is a best practice, I'd say. So put your code before the </body> closes:
<script type="text/javascript">
$(document).ready(function() {
$('.menu').dropit();
});
</script>
And obviously you need to load your jQuery from a CDN, so put it above all script code.
Yes, that would also need to go before the </body> closes.
The diagram explains it better now. Have a look.
Related
I'm a complete newbie in the area of html/js. I need to create a very basic interface with 17 pictures. Each one, when clicked plays given sound.
After days of tinkering and looking for the right approach, I managed to create something that works and looks good, but with one small problem.
When one audio sample is triggered, clicking another picture should stop and reset the previous one. I found a lot of examples on this site, but my understanding of js syntax is so little I can't implement it properly.
I'd appreciate your help.
Here's what i have:
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track1').click(function() {
$('#1').append('<embed id="1" src="content/mp3/01.mp3" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track1" src="content/img/01.jpg" width="180" height="180" border="0" id="track1" alt="" />
<div id="1"> </div>
I'd really appreciate your help.
I cleaned up a bit from the post that I linked you. Give this a try to see if it allows you to play and stop the audio.
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'content/mp3/01.mp3');
$('#track1').click(function() {
audioElement.pause();
audioElement.currentTime = 0;
audioElement.play();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img name="track1" src="content/img/01.jpg" width="180" height="180" border="0" id="track1" alt="" />
<div id="1"> </div>
Maybe, to be more clear I post more of the code. The whole site consist of exactly the same "modules" multiplied 17 times. It looks as follows:
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track4').click(function(){
$('#4').append('<embed id="4" src="content/mp3/04.mp3" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track4" src="content/img/04.jpg" width="180" height="180" border="0" id="track4" alt="" />
<div id="4"> </div>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track3').click(function(){
$('#3').append('<embed id="3" src="content/mp3/03.mp3" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track3" src="content/img/03.jpg" width="180" height="180" border="0" id="track3" alt="" />
<div id="3"> </div>
I am trying to load a new local html page within a specific div when I click on an object within svg. Here is the code I have.
<html>
<head>
<script>
$("#button").click(function(){
$("#div1").load("1.html");
});
</script>
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<style type="text/css">
#div1 {
position:absolute;
top: 15%;
left: 15%;
width:300px;
height:300px;
margin-top: -9px; /*set to a negative number 1/2 of your height*/
margin-left: -15px; /*set to a negative number 1/2 of your width*/
border: 1px solid #FFFFFF;
background-color: none;
}
</style>
<div id="div1">Div Placement</div>
</body>
</html>
I've fiddled with this for a few days with no avail. I do not want to use the div hide/show method if at all possible.
Many thanks!
~ Leo
EDIT
okie I've tried doing what you did on the fiddle but it still will not change the div.
here is what I have now. Yes an index exists within the pages folder.
<html>
<head>
<script type="text/javascript" src="/js.jquery/jquery-2.1.1.min.js"> </script>
<script>
$("#button").click(function(){
$("#div1").text("Loading...");
$("#div1").load("/pages/");
});</script>
</head>
<body bgcolor="#000000">
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<div id="div1">Div Placement</div>
EDIT
Third iteration of code, still not working
<html>
<head>
<meta charset="UTF-8">
<title>Float Test</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$("#button").click(function(){
$("#div1").text("Loading...");
$("#div1").load("/pages/");
});</script>
</head>
<body bgcolor="#000000">
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<div id="div1">Div Placement</div>
</body>
</html>
It works fine for me.
http://jsfiddle.net/sumzujre/
The main problem seems to be that you aren't including the jQuery library. Add this line to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Also, make sure that "1.html" exists. If the server returns an error (eg. 404), nothing will be inserted into your div.
Update:
You will need to make sure the elements exist before you try to add event handlers to them. Either move your <script> block to the end of the file, or you can leave it at the top and surround it with $.ready().
<script>
$(document).ready(function() {
$("#button").click(function(){
$("#div1").text("Loading...");
$("#div1").load("/pages/");
});
});
</script>
I always use ajax. Like this
<div id="my-content"></div>
<a id="button">Click to load</a>
<script type="text/javascript">
$('#button').live('click',function(){
$.ajax({
method: 'POST',
url:'yourPage.html',
success:function(data){
$('#my-content').html(data)
}
})})
</script>
<html>
<head>
<title>Float Test</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body bgcolor="#FFFFFF">
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<style type="text/css">
#div1 {
position:absolute;
top: 15%;
left: 15%;
width:300px;
height:300px;
margin-top: -9px; /*set to a negative number 1/2 of your height*/
margin-left: -15px; /*set to a negative number 1/2 of your width*/
border: 1px solid #FFFFFF;
background-color: none;
}
</style>
<div id="div1">Text</div>
Working iteration of code. I had removed the hashtag within
<a xlink:href="#" id="button" class="button">
in my working code. Thank you for your patience with my lack of thoroughness
</body>
</html>
<script>
$("#button").click(function(){
$("#div1").load("1.html");
});
</script>
Hi I have been having this problem for about 4 months now i gave up at first but now i have to solve it am trying to do a zoom in effect on hover and i did all the code and it works properly, but when i copy it and paste it in the editor or like the code it self it doesn't work i tried Firefox (latest version) and Google chrome(also latest version) but still no effect happens nothing and also i tried using Google's cdm and also tried downloading the jQuery from the website itself nothing worked out please help me as i am just a beginner in coding thank you
My HTML :
<html>
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
</head>
<body>
<img src="RandomPage.png">
<p style="margin-right:220px; margin-top:20px; float:right; font-size:22px; font-family:century gothic; id="nav2" ">I <a id="nav" href="">HOME</a> I <a id="nav" href="">Apple</a> I <a id="nav" href="">Android</a> I <a id="nav" href="">Gaming</a> I <a id="nav" href="">Random Tech</a> I <a id="nav" href="">About Us</a> I </p>
<div id="menu">
<img style=" margin-top:10px; margin-left:10px; border-radius:4px; " src="RandomGaming.png" class="resizableImage">
<img style=" margin-top:10px; border-radius:4px;" src="RandomFashion.png" class="resizableImage">
</div>
</body>
my script :
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
Thank You In Advance
You need to add the jquery library, and it has to be the first thing you add.
Paste this <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> in your head tag, and make sure it's the FIRST script there.
Your sample HTML is not including jQuery.
Put the follwoing script below the script in your head. So liek this:
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- include future js scripts here -->
</head>
Then JUST before your closing </body> tag, add the jQuery code, like so:
<script>
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
</script>
Note: It's more efficient and allows your pages to load faster if your JS scripts are included before your closing tag above the functions..but for simplicity sake, I included it in the <head>, which is not bad either.
I'm looking to see if there's a way to make this code less clumsy? I'm thinking there must be a more elegant way to make 2 buttons that toggle between 2 or more button states on hover and click.
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript">
img1 = "images/buy1.png";
img2 = "images/buy2.png";
function chng(c_img) {
if (c_img.src.indexOf(img1)!= -1) c_img.src = img2;
else c_img.src = img1;
}
img3 = "images/sell1.png";
img4 = "images/sell2.png";
function chng2(c_img) {
if (c_img.src.indexOf(img3)!= -1) c_img.src = img4;
else c_img.src = img3;
}
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<a href="#"><img src="images/buy1.png" onclick="chng(this)" name="img" width="115"
border="0" height="50" id="img" /></a>
</div><a href="#"><img src="images/sell1.png" onclick="chng2(this)" name="img2"
width="115" border="0" height="50" id="img2" /></a>
</div>
</body>
</html>
This sounds like a perfect fit for using CSS background sprites. Create images that have both states in them, stacked vertically:
----------------------
| "on" image |
----------------------
----------------------
| "off" image |
----------------------
Give your links a class and apply the images to them to the elements using the background-image property (using the shorthand notation below):
.buy1 {
display: block;
width: 115px;
height: 50px;
background: transparent url(images/buy1.png) left bottom no-repeat;
}
.buy1.on { background-position: left top; }
Then with the JavaScript, you can simply toggle the class:
$(document).ready(function(){
$("#sell a").on('click',function(){
$(this).toggleClass('on');
});
});
This approach has a number of advantages:
Fewer server requests (you can combine all the images into one sprite
sheet and they will load in one request) mean better performance
There will be no lag on hover as the "on" state is already loaded
Much easier to maintain
Edit I'd add, you should put some real content in the links to give screenreader users something to navigate with. I'd typically use an image replacement technique for that:
<span>Buy Now</span>
.buy1 span {
position: absolute;
display: block;
top: -10000px;
left: -10000px;
font-size: 1px;
}
Using jQuery toggle-event
NOTE
The code will handle any link and image where the ID of the link and the image has some kind of match - doable with data as well but compatible with non-html5 browsers too.
You will have to provide images or classnames for each different image but the toggle script is fixed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var icons = {
buy:{
on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png",
off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
},
sell:{
on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png",
off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
}
}
$(document).ready(function() {
$(".toggleLink").toggle(
function() {
var id = $(this).attr("id");
$("#"+id+"Img").attr("src",icons[id].on);
// OR change the className of the link
// OR use data-toggle - but no need to test the image src
},
function() {
var id = $(this).attr("id");
$("#"+id+"Img").attr("src",icons[id].off);
}
);
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<a href="#" id="buy" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="buyImg" width="115"
border="0" height="50" /></a>
<a href="#" id="sell" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="sellImg" width="115"
border="0" height="50" /></a>
</div>
</body>
</html>
UPDATE Using data attributes to prove a point
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".toggleLink").toggle(
function() {
var img = $(this).find("img");
img.attr("src",img.data('toggleon'));
},
function() {
var img = $(this).find("img");
img.attr("src",img.data('toggleoff'));
}
);
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="buy">
<a href="#" class="toggleLink"><img src="images/buy1.png"
data-toggleon="images/buy1.png"
data-toggleoff="images/buy2.png"
width="115" border="0" height="50" id="img" /></a>
</div>
</body>
</html>
PS: Have a look here for a great version
Element with hover then click removes hover effect and click again adds hover again with a fiddle by Greg Pettit
Use CSS selectors - like what is documented here:
http://www.w3schools.com/cssref/sel_hover.asp
if you mean more stylish there is way by css or jquery
http://www.webreference.com/programming/css_stylish/index.html
http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/
It seems fine. I can think of a more elegant way, using jQuery:
First off, give each one of your elements the toggleImg class. Then, give each button the attributes data-toggleon and data-toggleoff. Remove the id and name if you desire.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggleImg").on('click',function(){
if($(this).attr('src')==$(this).data('toggleon')){
$(this).attr('src',$(this).data('toggleoff'))
}else{
$(this).attr('src',$(this).data('toggleon'))
}
});
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<img src="images/buy1.png" class=toggleImg data-toggleon="images/buy1.png" data-toggleoff="images/buy2.png" width="115" border="0" height="50" />
</div><img src="images/sell1.png" class=toggleImg data-toggleon="images/sell1.png" data-toggleoff="images/sell2.png" width="115" border="0" height="50" />
</div>
</body>
</html>
The code can be thus easily extended--you can just add new imgs wherever you want with the appropirate class/attributes and not worry about adding new JS.
Im having a few problems (I've highlighted them in the code):
Problem 1: I don't know how to get the #dl_buttn centred - (45% is nearest) - is there any way to 'Align:centre'?
Problem 2: Im trying to display a content locker onClick - However my locker isn't popping up? - is the code wrong to display a javascript content locker?
Problem/Question 3: Instead of displaying a message on the second click, i would like to display a java alert - I have tried to do this, but failed - could anyone help me out? - (the id for it is 'message')
<html>
<head>
<title>Passupload Passowords - Get the Passwords for your .RAR Files Here!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#dl_buttn {
position:absolute;
left: 45%;
top: 280px;
}
-->
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
</head>
<center>
<body bgcolor="#3c3c3c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<input type="image" id="dl_buttn" src="images/GETRARPASS.png" alt="Submit Form" position:absolute; onClick="imageClick()" />
<span id="message" style="display:none">You have completed this part!</span>
<script type="text/javascript"> // --------------PROBLEM 3
/* <![CDATA[ */
var count = 0;
function showMessage () {
if (count++ > 0) {
document.getElementById("message").style.display="block";
}
}
function changeImage() {
document.getElementById("dl_buttn").src = "images/REVEALPASS.png"
}
function imageClick() {
var fileref = document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('src', 'http://tvserieslink.com/CLP/locker.js?guid=44f3fa3f991e9a34');
showMessage();
setTimeout(changeImage, 3000);
}
/* ]]> */
</script>
<!-- Save for Web Slices (Puloaaa.psd) -->
<table id="Table_01" width="1100" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/Pulo_01.gif" width="1100" height="150" alt=""></td>
</tr>
<tr>
<td><img src="images/Pulo_02.gif" width="1100" height="650" alt="">
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>
Sorry I'm a noob & Sorry for posting the whole code - Thanks
Problem 1:
a) You have improper syntax for your input, remove the position:absolute css as it doesn't belong there:
<input type="image" id="dl_buttn" src="images/GETRARPASS.png" alt="Submit Form" onClick="imageClick()" />
b) use margin: 0 auto; to center your dl_buttn and get rid of the absolute positioning.
Problem 2:
You are creating a script element in the DOM but you are not attaching it anywhere. You need to use document.body.insertBefore or insertAfter or similar to attach it to the document.
Problem 3:
To display a javascript alert use alert('Your message here.');