I am using jQuery UI for tabs, the tabbed content is an iframe. The problem I have is either jQuery or jQuery UI is adding the display:none to the iframe as an inline style. How can I either stop that or add display:block after it does that? I've tried many things and so far nothing works. Also, it works locally but when it's on a live server is when it happens.
This is the live site: http://gabriel-digital.com/banners.html
<!DOCTYPE html>
<html>
<head>
<title>Gabriel Ramirez - Site Under Renovation</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="assets/jquery-ui/jquery-ui.min.css" rel="stylesheet">
<link type="text/css" href="assets/jquery-ui/jquery-ui.structure.css" rel="stylesheet">
<link type="text/css" href="assets/jquery-ui/jquery-ui.theme.css" rel="stylesheet">
<link type="text/css" href="assets/styles.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body id="banners">
<div class="container text-center" id="error">
<div class="row">
<div class="col-md-12">
<!-- Tabs -->
<h2 class="demoHeaders">Web Banners</h2>
<h3>Clicking on the tab will refresh the animation.</h3>
<div id="tabs">
<ul class="left-nav">
<li>Lemonade</li>
<li>Emoji</li>
<li>Souvenir</li>
<li>DiaResQ</li>
<li>Love Me</li>
</ul>
<div id="tabs-1">
<div id="tabs-content-1">
<ul>
<li>300 x 250</li>
</ul>
<div id="tabs-1-1">
<iframe id="I1" src="banners/lemonade-300x250/index.html" width="300" height="250"></iframe>
</div>
</div>
</div>
<div id="tabs-2">
<div id="tabs-content-2">
<ul>
<li>160 x 600</li>
<li>300 x 250</li>
<li>300 x 600</li>
<li>320 x 50</li>
<li>728 x 90</li>
<li>970 x 250</li>
</ul>
<div id="tabs-1-2">
<iframe id="I2" src="banners/emoji-160x600/index.html" width="160" height="600"></iframe>
</div>
<div id="tabs-2-2">
<iframe id="I3" src="banners/emoji-300x250/index.html" width="300" height="250"></iframe>
</div>
<div id="tabs-3-2">
<iframe id="I4" src="banners/emoji-300x600/index.html" width="300" height="600"></iframe>
</div>
<div id="tabs-4-2">
<iframe id="I5" src="banners/emoji-320x50/index.html" width="320" height="50"></iframe>
</div>
<div id="tabs-5-2">
<iframe id="I6" src="banners/emoji-728x90/index.html" width="728" height="90"></iframe>
</div>
<div id="tabs-6-2">
<iframe id="I7" src="banners/emoji-970x250/index.html" width="970" height="250"></iframe>
</div>
</div>
</div>
<div id="tabs-3">
<div id="tabs-content-3">
<ul>
<li>160 x 600</li>
<li>300 x 250</li>
<li>300 x 600</li>
<li>320 x 50</li>
<li>728 x 90</li>
<li>970 x 250</li>
</ul>
<div id="tabs-1-3">
<iframe id="I8" src="banners/souvenir-160x600/index.html" width="160" height="600"></iframe>
</div>
<div id="tabs-2-3">
<iframe id="I9" src="banners/souvenir-300x250/index.html" width="300" height="250"></iframe>
</div>
<div id="tabs-3-3">
<iframe id="I10" src="banners/souvenir-300x600/index.html" width="300" height="600"></iframe>
</div>
<div id="tabs-4-3">
<iframe id="I11" src="banners/souvenir-320x50/index.html" width="320" height="50"></iframe>
</div>
<div id="tabs-5-3">
<iframe id="I12" src="banners/souvenir-728x90/index.html" width="728" height="90"></iframe>
</div>
<div id="tabs-6-3">
<iframe id="I13" src="banners/souvenir-970x250/index.html" width="970" height="250"></iframe>
</div>
</div>
</div>
<div id="tabs-4">
<div id="tabs-content-4">
<ul>
<li>970 x 250</li>
</ul>
<div id="tabs-1-4">
<iframe id="I14" src="banners/diaresq-970x250/index.html" width="970" height="250"></iframe>
</div>
</div>
</div>
<div id="tabs-5">
<div id="tabs-content-5">
<ul>
<li>160 x 600</li>
<li>300 x 250</li>
<li>300 x 600</li>
<li>320 x 50</li>
<li>970 x 90</li>
</ul>
<div id="tabs-1-5">
<iframe id="I15" src="banners/ks-160x600/index.html" width="160" height="600"></iframe>
</div>
<div id="tabs-2-5">
<iframe id="I16" src="banners/ks-300x250/index.html" width="300" height="250"></iframe>
</div>
<div id="tabs-3-5">
<iframe id="I17" src="banners/ks-300x600/index.html" width="300" height="600"></iframe>
</div>
<div id="tabs-4-5">
<iframe id="I18" src="banners/ks-320x50/index.html" width="320" height="50"></iframe>
</div>
<div id="tabs-5-5">
<iframe id="I19" src="banners/ks-970x90/index.html" width="970" height="90"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/site.js"></script>
<script>
// $( "#accordion" ).accordion();
$( "#tabs, #tabs-content-1, #tabs-content-2, #tabs-content-3, #tabs-content-4, #tabs-content-5" ).tabs();
$( function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
} );
</script>
</body>
</html>
This was caused by an ad blocker, figured it out after 2 hours.
Related
I've been searching the internet for someone who is having the same problem but I wasn't able to find a solution. I just can't figure out how to change the source of an image using javascript. I initially thought that it might be because I was writing the javascript in another file instead of within the actual html file but I tried putting the script within the html file and that didn't work either. If someone could tell me if there's something I'm doing wrong that would be great.
<!DOCTYPE html>
<html>
<head>
<title>
Rock Paper Scissors Game
</title>
<link rel="stylesheet" href="styles.css" />
<body>
<header>
<h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Make Your Move!</p>
</div>
<div class="choices">
<div class="choice" **onclick="changeImg()**" id="r">
<img src="images/rock.png" width="115" height="95" />
</div>
<div class="choice" id="p">
<img src="images/paper.png" width="120" height="120" />
</div>
<div class="choice" id="s">
<img src="images/scissors.png" width="130" height="110" />
</div>
</div>
<div class="fighters">
<div class="fighter" id="u">
<img src="images/rock.png" width="370" height="300" />
</div>
<div class="fighter" id="c">
<img src="images/rockflipped.png" width="370" height="300" />
</div>
</div>
<div class="squares">
<div class="square" id="userSquare"></div>
<div class="square" id="computerSquare"></div>
</div>
**
<script>
var userImg = document.getElementById('u');
var compImg = document.getElementById('c');
function changeImg() {
console.log('here');
userImg.src = 'file:///C:/...scissors.png';
}
</script>
**
<script src="app.js" charset="utf-8"></script>
</body>
</head>
</html>
Simple Description
You need to put the id attribute inside the img tag.
And it needs to be unique. What you are doing now is that you are getting the div which is not the actual image.
Example:
<img var userImg = document.getElementById("c500");
<script>
function changeImg()
{
console.log("here");
userImg.src = "https://i.chzbgr.com/full/8759954176/hFD7BD608/can-has-code-review.jpg";
}
changeImg();
</script>
JSFiddle: https://jsfiddle.net/m56tq1ba/
Full Source
<!DOCTYPE html>
<html>
<head>
<title>
Rock Paper Scissors Game
</title>
<link rel="stylesheet" href="styles.css" />
<body>
<header>
<h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Make Your Move!</p>
</div>
<div class="choices">
<div class="choice" onclick="changeImg()" id="r">
<img src="images/rock.png" width="115" height="95" />
</div>
<div class="choice" id="p">
<img src="images/paper.png" width="120" height="120" />
</div>
<div class="choice" id="s">
<img src="images/scissors.png" width="130" height="110" />
</div>
</div>
<div class="fighters">
<div class="fighter" id="u">
<img id="userImg_100" src="images/rock.png" width="370" height="300" />
</div>
<div class="fighter" id="c">
<img src="images/rockflipped.png" width="370" height="300" />
</div>
</div>
<div class="squares">
<div class="square" id="userSquare"></div>
<div class="square" id="computerSquare"></div>
</div>
<script>
var userImg = document.getElementById('userImg_100');
var compImg = document.getElementById('c');
function changeImg() {
console.log('here');
userImg.src = 'https://i.chzbgr.com/full/8759954176/hFD7BD608/can-has-code-review.jpg';
}
</script>
<script src="app.js" charset="utf-8"></script>
</body>
</head>
</html>
The problem is you are getting the div with the id="u" and assigning the src for that which wont work.
Get the image by assigning an id to it and ge that image tag by its id and assign the image. modified your code little bit as below
<!DOCTYPE html>
<html>
<head>
<title>
Rock Paper Scissors Game
</title>
<link rel="stylesheet" href="styles.css" />
<body>
<header>
<h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Make Your Move!</p>
</div>
<div class="choices">
<div class="choice" **onclick="changeImg()**" id="r">
<img src="images/rock.png" width="115" height="95" />
</div>
<div class="choice" id="p">
<img src="images/paper.png" width="120" height="120" />
</div>
<div class="choice" id="s">
<img src="images/scissors.png" width="130" height="110" />
</div>
</div>
<div class="fighters">
<div class="fighter" id="u">
<img id="u_image" src="images/rock.png" width="370" height="300" />
</div>
<div class="fighter" id="c">
<img id="c_image" src="images/rockflipped.png" width="370" height="300" />
</div>
</div>
<div class="squares">
<div class="square" id="userSquare"></div>
<div class="square" id="computerSquare"></div>
</div>
**
<script>
var userImg = document.getElementById('u_image');
var compImg = document.getElementById('c_image');
function changeImg() {
console.log('here');
userImg.src = 'file:///C:/...scissors.png';
}
</script>
**
<script src="app.js" charset="utf-8"></script>
</body>
</head>
</html>
When I click on the image itself, the lightbox loads but the image itself doesn't - instead, all I see is a white box. Basically, the lightbox shows up, but the image doesn't load. I'm not sure what I am doing wrong. I watched a youtube video on how to create a lightbox and followed the steps exactly. I don't know what I am doing wrong. I included the links to the proper javascript and css files.
Please help!!
This is my html below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description:" content="Image Gallery">
<meta http-equiv="author" content="Fiona Blumin" />
<title>Image Gallery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="lightbox.min.css" type="text/css">
<script type="text/javascript" src="lightbox-plus-jquery.min.js"></script>
</head>
<body>
<div class="Welcome">
<h1>My Travels through Europe</h1>
</div>
<div class="Pictures">
<div class="container-fluid">
<div class="row">
<div class="col">
<a href="images/pic1.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic1 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic2.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic2 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic3.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic3 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic4.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic4 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic5.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic5 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic6.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic6 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic7.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic7 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic8.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic8 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic9.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic9 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic10.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic10 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic11.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic11 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic12.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic12 copy.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This how it looks when I click on an image in my gallery:
maybe this is the problem
src="images/pic1 copy.jpg"
try to do it like this
src="images/pic1copy.jpg"
and make sure you are targeting the right picture with the right path. Let me know if it works
I need serious help with my code. I am pretty new to JavaScript so it could be something really simple.
I want to use a Jquery plugin called ElevateZoom.
I downloaded the plugin, linked the jquery and elevatezoom files (jquery is working fine) and copied the demo's code. The demo works fine, so what I do not get is on the exact same browser but on my page it does not work. I have been scratching my head for at least 3 hours over this and tried multiple things such as implementing the scripts internally, trying different versions of jquery, using different images etc. My HTML and JavaScript code is below (note my first block of javascript works):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Jeff/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Jeff/script.js"></script>
<script src="Jeff/jquery.elevatezoom.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="test"></div>
<div class="logo"></div>
<nav>
<div class="container">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>Deals</li>
<li>Store</li>
<li>Basket</li>
<li>Coming soon</li>
<li>Support</li>
</ul>
</div>
</nav>
<div class="main-container">
<div class="content">
<br>
<div class="ws_shadow"></div>
<hr>
<div class="contentbox-big2" style="margin-left: 0px;">
<div class="titlebox">
ADS
<div class="titleinfo"></div>
</div>
<div class="newscontent">
<img src="img/brit.png" alt="image" style="width:167px;height:258px;">
<br> <br> <hr> <br> <br>
<img src="img/coke.jpg" alt="image" style="width:167px;height:258px;">
<hr>
</div>
</div>
<div class="contentbox-big3" style="margin-left: 0px;">
<div class="titlebox">
Deals
<div class="titleinfo"></div>
</div>
<div class="newscontent2">
<img id="zoom_01" src="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png" data-zoom-image="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png"/>
Pokemon Sun 3DS - £14.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
<img src="https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/20171029_pubg_logo.jpg" alt="image" style="width:300px;height:350px;">
Player Unknown's Battlegrounds - £19.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
<img src="http://sm.ign.com/t/ign_in/cover/b/battlefiel/battlefield-1_9ufa.250.jpg" alt="image" style="width:300px;height:350px;">
Battlefield 1 - £24.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</div>
<div class="soundcloud">
<iframe width="100%" height="80" scrolling="no"
frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/184695140&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</html>
JavaScript code:
function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
window.location.href='basket.html';
};
}
function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
window.location.href='basket.html';
};
}
$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
I'm trying to get anchor tags to scroll down to sections of my website but I can't get it to work. This is where I'm getting the code from: http://www.cmscanbesimple.org/blog/smooth-page-scroll-to-an-anchor. I copied it into its own HTML file and it worked perfectly so I can't figure out why it's not working on my site.
<head>
<meta charset="utf-8">
<title>J2 Productions</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="parrallax.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div id="paintsplash">
<img src="paint_splash.png" height="93%" width="93%" />
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div id="middle">
<div id="services">
<div id="s_content">
<div id="s_title">
<p>Beats</p>
</div>
<div id="beat1">
<p>| Limitless |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/186082426&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat2">
<p>| Haze |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/176496757&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat3">
<p>| Self-Destruct |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/159969838&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat4">
<p>| Midnight Bass |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/162606984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<div id="recent">
<div id="r_content">
<div id="r_title">
<p>Recent</p>
</div>
<div id="one">
<a href="https://itunes.apple.com/us/album/one-ep/id984646172">
<img src="Front%20Cover.jpg" width="300">
</a>
</div>
<div id="onetxt">
<p align="center">
| Speaking My Language |
<br/>| Pay Up |
<br/>| One Way |
</p>
</div>
<div id="rollin">
<a href="https://itunes.apple.com/us/album/rollin-i-dont-wanna-grow-up/id925559884">
<img src="rollin.jpg" width="300">
</a>
</div>
<div id="rollintxt">
<p align="center">| Rare of Breed - Rollin' |</p>
</div>
</div>
</div>
<div id="pricing">
<div id="p_content">
<div id="p_title">
<p>Pricing</p>
</div>
<div id='exclusive'>
<img src="Exclusive.png" width="650">
</div>
<div id="custom">
<img src="custom.png" width="650">
</div>
</div>
</div>
<div id="aboutme">
<div id="a_content">
<div id="a_title">
<p>Contact Me</p>
</div>
<div id="me">
<img src="me.png" width='350px' />
</div>
<div id="email">
<img src="contact.png" width="100%" height="600px">
</div>
<div id="social">
<div id="fb">
<a href="https://www.facebook.com/J2producing">
<img src="facebook.png" width="113px">
</a>
</div>
<div id="tw">
<a href="https://twitter.com/j2_productionz">
<img src="twitter.png" width="113px">
</a>
</div>
<div id="ig">
<a href="https://instagram.com/j2productions">
<img src="instagram.png" width="123px">
</a>
</div>
<div id="yt">
<a href="https://www.youtube.com/channel/UC2Z9nuiZHdU6fN-UfOie6QA">
<img width="123px" src="youtube.png">
</a>
</div>
<div id="gp">
<a href="https://plus.google.com/u/0/b/100577545228957896103/100577545228957896103/about?hl=en">
<img src="google.png" width="115px">
</a>
</div>
<div id="sc">
<a href="https://soundcloud.com/j2productions">
<img src="soundcloud.png" width="115px">
</a>
</div>
</div>
</div>
</div>
<div id="seperators">
<a id="page1"></a>
<div id="page2"></div>
<div id="page3"></div>
<div id="page4"></div>
</div>
</div>
</div>
</div>
<div id="top">
<a href="index.html">
<img src="J2Productions-text.png" id="logo" draggable="false">
</a>
BEATS
RECENT
PRICING
ABOUT ME
<img src="line.png" id="line">
</div>
<div id="bottom"></div>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#paintsplash').fadeIn(1200).delay(3500);
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
});
</script>
</body>
The anchor href is the target id. Since your anchor href is set to #page1, then the target is <a id="page1">. You must change them. Example:
<div id ="top">
<img src="J2Productions-text.png" id="logo" draggable="false">
BEATS
RECENT
PRICING
ABOUT ME
<img src="line.png" id="line">
</div>
EDIT
Check this:
<div id="seperators">
<a id="page1"></a>
<div id="page2"></div>
<div id="page3"></div>
<div id="page4"></div>
</div>
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div id="paintsplash">
<img src="paint_splash.png" height="93%" width="93%"/>
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div id="middle">
<div id="services">
<div id="s_content">
<div id="s_title">
<p>Beats</p>
</div>
<div id="beat1">
<p>
| Limitless |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/186082426&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat2">
<p>
| Haze |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/176496757&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat3">
<p>
| Self-Destruct |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/159969838&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat4">
<p>
| Midnight Bass |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/162606984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<div id="recent">
<div id="r_content">
<div id="r_title">
<p>Recent</p>
</div>
<div id="one">
<a href="https://itunes.apple.com/us/album/one-ep/id984646172">
<img src="Front%20Cover.jpg" width="300">
</a>
</div>
<div id="onetxt">
<p align="center">
| Speaking My Language |<br/>
| Pay Up |<br/>
| One Way |
</p>
</div>
<div id="rollin">
<a href="https://itunes.apple.com/us/album/rollin-i-dont-wanna-grow-up/id925559884">
<img src="rollin.jpg" width="300">
</a>
</div>
<div id="rollintxt">
<p align="center">
| Rare of Breed - Rollin' |
</p>
</div>
</div>
</div>
<div id="pricing">
<div id="p_content">
<div id="p_title">
<p>Pricing</p>
</div>
<div id='exclusive'>
<img src="Exclusive.png" width="650">
</div>
<div id="custom">
<img src="custom.png" width="650">
</div>
</div>
</div>
<div id="aboutme">
<div id="a_content">
<div id="a_title">
<p>Contact Me</p>
</div>
<div id="me">
<img src="me.png" width='350px'/>
</div>
<div id="email">
<img src="contact.png" width="100%" height="600px">
</div>
<div id="social">
<div id="fb">
<a href="https://www.facebook.com/J2producing">
<img src="facebook.png" width="113px">
</a>
</div>
<div id="tw">
<a href="https://twitter.com/j2_productionz">
<img src="twitter.png" width="113px">
</a>
</div>
<div id="ig">
<a href="https://instagram.com/j2productions">
<img src="instagram.png" width="123px">
</a>
</div>
<div id="yt">
<a href="https://www.youtube.com/channel/UC2Z9nuiZHdU6fN-UfOie6QA">
<img width="123px" src="youtube.png">
</a>
</div>
<div id="gp">
<a href="https://plus.google.com/u/0/b/100577545228957896103/100577545228957896103/about?hl=en">
<img src="google.png" width="115px">
</a>
</div>
<div id="sc">
<a href="https://soundcloud.com/j2productions">
<img src="soundcloud.png" width="115px">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id ="top">
<img src="J2Productions-text.png" id="logo" draggable="false">
BEATS
RECENT
PRICING
ABOUT ME
<img src="line.png" id="line">
</div>
<div id="bottom">
</div>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#paintsplash').fadeIn(1200).delay(3500);
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
} );
} );
</script>
i'm making a website with Fabricjs. One div is going to be the canvas and another is going to have lots of images (hundreds). I want to be able to click on the images so that they pop up in the canvas. My question is; how do i get the src of the images when clicked on so that an img node goes into the canvas node. Should i make an array of addEventl... for each of the images?
(writing in javascript)
thanks as always :)
<!doctype html>
<html lang="en";>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<header id="Header">
Om Oss
Välj Design
<img id="Logo" src=LogotypHemsida.png>
Skapa Design
Hjälp
</header>
<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode">
</div>
<div id="CanvasContainer">
<canvas id="Canvas" width="270px" height="519px"></canvas>
</div>
<div id="LayerMode">
</div>
<div id="IPhoneMode">
</div>
</div>
<div id="RightColumn">
<div id="TextureMode">
</div>
<div id="TextureFilter">
</div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
<footer id="Footer">
<div id="FooterSpace"></div>
<div id="FooterColumnLeft">
Välj Design
Skapa Design
Om Oss
Hjälp
</div>
<div id="FooterDevider">
</div>
<div id="FooterColumnRight">
<div id="Facebook">
<img id="FacebookLogo" src=FacebookLogo.png>
Gilla oss på Facebook
</div>
<div id="Twitter">
<img id="TwitterLogo" src=TwitterLogo.png>
Följ oss på Twitter
</div>
</div>
<div id="FooterSpace"></div>
<div id="BottomColor"></div>
</footer>
</div>
</body>
</html>
You don't have to declare onclick for each img.
Try this: http://jsfiddle.net/cEh93/
$("#images img").click(function() {
var getsource = $(this).attr("src");
alert(getsource);
});
You don't need the onclick on each image, you can attach a jQuery event handler to all images and get their src attribute (this will output the image src to the console when the image is clicked):
jQuery(document).ready(function()
jQuery("#images img").on( "click", function() {
console.log( jQuery( this ).attr('src') );
});
}); // ready
You can set the retrieve of SRC only attaching event for upper DIV (using JS), like that:
<div id="images" onclick="getSelectedImageURL(event);">
<input type="image" src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
</div>
To get current selected image SRC on click event...
function getSelectedImageURL(event){
if(event.target.localName.toUpperCase() == 'IMG')
alert(event.target.src);
}