I found something that can not only toggle on/off an image, but also make that image a link.
Problem: It only works in JSFiddle.
I put everything back into html (providing script) and made sure that everything was the same...but still, on my site it won't work. On JSFiddle, it does.
If anyone has a solution, I'd be most grateful.
The code I'm using for the site:
<center>
<p>
<div class="icon-container">
<a id="TOURBUTTON">
<img src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" style="width: 188px; height: 188px;" />
</a>
</div>
</p>
</center>
<center>
<p>
<div class="display-container">
<img id="T5" style="display:none;" a href="http://music.britrodriguez.com" src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#TOURBUTTON').on("click", function(){
$('#T5').toggle();
});
});
$('#T5').click(function(event){
var link = $(this);
var target = link.attr("target");
if ($.trim(target).length > 0){
window.open(link.attr("href"), target);
} else {
window.location = link.attr("href");
}
event.preventDefault();
});
</script>
<style type="text/css">
.icon-container{
display:inline-block;
margin-bottom: 0px;
margin-top: 10px;
}
</style>
The JSFiddle:
http://jsfiddle.net/ccymzmvn/
The site it's not working on:
http://www.britrodriguez.com/HITEST
Why do you open the url with JavaScript? Just try:
<a href="http://music.britrodriguez.com">
<img src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png" />
</a>
These are just suggestions, but:
Make sure your HTML document is well formed and remove extraneous levels. The deeper the DOM tree goes, the "heavier" the page can get for the browser. Always strive towards a shallow DOM tree
The event handler when you click #T5 doesn't really need jQuery, I've used native JS, you can see it has a one to one drop-in.
Whenever you have a click event on an element, change the cursor for the user so they know it is clickable.
I have also user opacity to hide the #T5 instead of display. That way you can make it fade nicely
http://jsfiddle.net/ccymzmvn/5/
HTML
<p class="icon-container">
<a id="TOURBUTTON">
<img src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" />
</a>
</p>
<p class="display-container">
<a href="http://music.britrodriguez.com">
<img id="T5" src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png" />
</a>
</p>
CSS
body {
text-align: center;
}
#TOURBUTTON {
display: inline-block;
}
#TOURBUTTON img {
cursor: pointer;
display: block;
width: 188px;
height: 188px;
}
img#T5 {
border: 1px solid red;
max-width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 800ms;
transition: opacity 800ms;
}
img#T5.active {
opacity: 1;
pointer-events: auto;
}
JavaScript
function open_link(event) {
event.preventDefault();
var link = this,
target = link.target;
if($.trim(target).length > 0) {
window.open(link.href, target);
} else {
window.location = link.href;
}
}
$(document).ready(function() {
var $T5 = $('#T5');
$('#TOURBUTTON').on("click", function(){
$T5.toggleClass('active');
});
$T5.on('click', open_link);
});
Related
I'm trying to get a gallery set up that, upon clicking a smaller image, it will show a hidden div with a larger size with that specific image that was clicked.
I'm wondering how you set up a Jquery where, upon clicking a div, it feeds the img src into another img tag (with a variable or otherwise).
I was playing around with something like
function getImageSrc(x) {
var x= document.getElementsByClassName("image").src,
return x;
Which I would then feed into another function, where x would be the img src from the getImageSrc function, but I just can't quite wrap my head around it. I can't seem to think of how to fire an onClick event inside the first function without throwing in an additional function inside the first one.
Any help would be great. I'll even take a whole new direction with this if this method won't work (besides plugins).
Here is the code snippet now that I have time to get to it. I'm basically trying to pass the image src into the .clicked when the image is clicked, upon which the .clicked will go from visibility: hidden to visibility: visible.
The next script that needs to run is when the .clicked div is visible and clicked, it goes back to hidden.
I'm mostly having trouble figuring out the first script.
.clicked {
visibility: hidden;
height: 100%;
width: 100%;
background: rgba(35,35,41,.9);
z-index: 100;
top:0;
}
.imgcontainer {
height: 200px;
width: 200px;
overflow: hidden;
}
<div class="clicked">
<img class="clickedimg" src="">
</div>
<div class="imgcontainer">
<img class="image" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</div>
Its pretty simple, Code explains itself
$(document).ready(function() {
$('.small > img').click(function() {
$('.big > img').prop('src', $(this).prop('src'));
$('.big').show();
})
});
.small {
height: 100px;
width: 100px;
}
.small >img,
.big > img {
height: 100%;
width: 100%;
}
.big {
height: 300px;
width: 300px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small">
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" />
</div>
<div class="big">
<img />
</div>
You could do something like this,
function getImageSrc(x){
var x= document.getElementsByClassName("image").src;
//Call the function to append the img src to the new element
appendImageSrc(x);
}
function appendImageSrc(imageSrc){
//append the src to the new Element
document.getElementsByClassName("imageLarger").src = imageSrc;
}
Please try this code. I think this will help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
document.getElementById("SmallerImageURL").src = "https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_(JPEG-HDR).jpg";
});
function EnlargeImage() {
var SmallImg = getImageSrc("SmallerImageURL");
document.getElementById("EnlargedImageURL").src = SmallImg;
}
function getImageSrc(ImageClass) {
var x = $("."+ImageClass).attr("src");
return x;
}
</script>
<style>
.SmallContainer {
width: 250px;
float: left;
}
.LargeContainer {
width: 500px;
float: left;
}
.LargeContainer img,
.SmallContainer img {
float: left;
width: 100%;
}
.row {
width: 100%;
float: left;
}
</style>
</head>
<body>
<div class="SmallContainer">
<img id="SmallerImageURL" class="SmallerImageURL"/>
</div>
<div class="LargeContainer">
<img id="EnlargedImageURL" />
</div>
<div class="row">
<button onclick="EnlargeImage()">Enlarge Me</button>
</div>
</body>
</html>
I have made a small modification to your getImageSrc method. I think implementing the same in jQuery is much better.
$(document).ready(function() {
$("#open_page").click(function(){
var go_to_url = $("#redirect").find(":selected").val();
document.location.href = go_to_url;
});
});
You could do something like this
I have got a video that appears in a light box from you tube, a custom one not a plugin.
On mobile when displayed portrait the video spans the full page width which looks nice and leaves some room at the top and bottom to click out.
The issue is when I go landscape the video fills the full screen and you cannot get back onto the page. My initial reaction was to hit the phones back button but I don't know a way of getting this to simply remove my lightbox. Is there a way in JS of getting a onclick off the phones back button?
The reason it goes full screen is because I am keeping the aspect ratio
var width: number = $('.youtube-video-lightbox').outerWidth();
var height: number = (width / 16) * 9;
$('.youtube-video-lightbox').height(height);
You can try using the following code:
You need to listen to navigation event and state.direction.
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
// close the light box here
}
if (direction == 'forward') {
// do something else
}
});
More details in this link
Tested the above code in my mobile and it works fine. You might need to stop the program flow after closing the light box so that default navigation of the back button is stopped.
Weave: http://kodeweave.sourceforge.net/editor/#e110ed7e89c3a38335739656a02f9850
Have you thought of trying a Pure CSS Based Lightbox?
$('[data-target]').on('click', function() {
$('.page').attr('src', $(this).attr('data-target'));
});
$('#call').on('change', function() {
(this.checked) ? "" : $('.page').attr('src', '');
});
input[id=call] {
display: none;
}
a {
margin: 1em;
}
.bg,
.content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: all ease-in 150ms;
}
.bg {
background: #515151;
background: rgba(0, 0, 0, 0.58);
}
.content {
margin: 2.6352em;
padding: 1em;
background: #fff;
}
input[id=call]:checked ~ .bg,
input[id=call]:checked ~ .content {
visibility: visible;
opacity: 1;
}
.block {
display: block;
}
.pointer {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="call" type="checkbox" />
<p>
<a href="javascript:void(0)" data-target="http://bing.com/" class="pointer block">
<label for="call" class="pointer">Bing</label>
</a>
<a href="javascript:void(0)" data-target="http://duckduckgo.com/" class="pointer block">
<label for="call" class="pointer">DuckDuckGo</label>
</a>
</p>
<label for="call" class="bg pointer"></label>
<div class="content">
<iframe width="100%" height="100%" frameborder="0" class="page"></iframe>
</div>
I've already tried to find out how to actually do it but the codes are always different and nothing works. I always end up ruining the link or the popup itself. So, I've got this code here:
.popup {
position:fixed;
display:none;
top:0px;
left:0px;
width:100%;
height:100%;}
#displaybox {
width:460px;
margin:50px auto;
background-color:#000000;}
.displaybox {
display:block;
position:relative;
overflow:hidden;
height:800px;
width:550px;}
.displaybox iframe {
position:absolute;}
<link><a id="object">click link</a></link>
<script>
$(function(){
$("link a").click(function(){
id = $(this).attr("id");
$(".popup:not(."+id+")").fadeOut(); $(".popup."+id).fadeIn();
});
$("a.close").click(function(){
$(".popup").fadeOut();
});
});
</script>
<div class="popup object">
<div id="displaybox"><a class="close">x</a>
<br>
<div class="displaybox"><iframe src="{theiframeblock}" height="800" frameborder="0" width="550"></iframe></div>
</div>
And I want to only load the iframe-block when I click on the "click link" link. How do I have to change the script for that? Any suggestions? :)
Update
The snippet I provided was pretty simple, so I assume when you tested it, you either missed some of the code or placed things in the wrong order, or your site is interfering somehow.
So what I did was made the primary page (index.html) with everything it needs to function on it's own. I made a second page as well (target.html) which is the test page that resides in the iframe.
Here's the DEMO
Simplified your functions by:
giving your popup an id #tgt
removed that <link> element; it's not an anchor <a> it's basically for external stylesheets
gave each anchor an empty href attribute
placed e.preventDefault() in each click function to avoid the <a> default behavior of jumping to a location.
replaced the iframe's src={..} template with the root, you can change that back, I just did that so the demo can function.
$(function() {
$("a.open").click(function(e) {
$('#tgt').fadeIn();
e.preventDefault();
});
$("a.close").click(function(e) {
$("#tgt").fadeOut();
e.preventDefault();
});
});
.popup {
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#displaybox {
width: 460px;
margin: 50px auto;
background-color: #000000;
}
.displaybox {
display: block;
position: relative;
overflow: hidden;
height: 800px;
width: 550px;
}
.displaybox iframe {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click link
<div id="tgt" class="popup object">
<div id="displaybox">X
<br>
<div class="displaybox">
<iframe src="/" height="800" frameborder="0" width="550"></iframe>
</div>
</div>
You can use:
$("#object").click(function() {
$("iframe").attr("src", "http://www.your-url.com");
});
Won't allow cross-origin requets
You can do it easily by using jQuery
Try this - https://jsfiddle.net/van06539/
HTML-
Click Link
<div id="iFrameContainer">
<iframe src="http://www.bbc.com" id="bestIframeEver" height="600" width="300" style="display:none;">
</iframe>
</div>
Javascript -
var isOpened = false;
$(document).ready(function() {
$("#openFrame").click(function() {
if (!isOpened) {
$("#bestIframeEver").fadeIn(1000);
} else {
$("#bestIframeEver").fadeOut(1000);
}
isOpened = !isOpened;
});
});
You can toggle the open / close state of the iframe
I would like to develop a scrolling function (on images) like on this site bethellery.com. At the moment, my code is kind of working, but I have a major problem: the size of the scrolling bar is nearly as big as my div size, so I can't scroll that much.
Here is the html:
<div id="container">
<div class="img-inner" id="img-1" style="display: block" >
<img class="img" src="src-1" alt="alt-1" />
</div>
<div class="img-inner" id="img-2" style="display: none" >
<img class="img" src="src-2" alt="alt-2" />
</div>
<div class="img-inner" id="img-3" style="display: none" >
<img class="img" src="src-3" alt="alt-3" />
</div>
<div class="img-inner" id="img-4" style="display: none" >
<img class="img" src="src-4" alt="alt-4" />
</div>
</div>
Here is the css:
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#container {
height: 100%;
width: 50%;
overflow-y: auto;
}
.img-inner{
height: 100%;
width: 100%;
}
.img {
height: 100%;
width: 100%;
}
Here is the js:
var lastScrollTop = 0;
var x = 1;
$('#container').scroll(function(event){
var st = $(this).scrollTop();
if(st > lastScrollTop){
//downscroll code
document.getElementById('img-'+x).style.display = "none";
//if next image isn't the last image
if((x+1) !== 4){
x=x+1;
}
document.getElementById('img-'+x).style.display = "block";
}
else{
document.getElementById('img-'+x).style.display = "none";
if((x-1) !== 0){
x=x-1;
}
document.getElementById('img-'+x).style.display = "block";
}
lastScrollTop = st;
});
I don't really know what is happening but I think due to the fact the display styles of the div are none, the scroll doesn't detect the flow under the first image.
On the site above, scroll bar size is clearly adapting itself to the numbers of images the div contains.
Thank you very much and have a great day.
The problem here is that display: none; turns off the display of an element, so it has no effect on layout (MDN's words), meaning any calculations that involve it simply won't.
This is demonstrated by the following JSFiddle (your code) - now two images are set to display: block; and the scroll bar shows this.
Try using visibility: hidden; instead, as demonstrated here. Visibility leaves an elements space occupied while not showing it. It's effect is like opacity.
I think the problem's already stated. When you click the plus extra content is show(the Hello Guest and Register and Signup). Is their a better and working way of doing this or do I have a bug. New at java-script so don't hate.
---> http://jsfiddle.net/CM9Av/
You are not setting the top . Also, cache your variables.
function menuanimate() {
var loginoutbox = document.getElementById("loginoutbox");
var fromtop = loginoutbox.style.top;
if (fromtop == "-20px") {
fromtop = "0px";
}
else {
fromtop = "-20px";
}
loginoutbox.style.top = fromtop;
}
In markup , set top in inline style. stlye.top wont read css property.
<div id="loginoutbox" class="ablack" style='top:-20px'></div>
Try outside fiddle in a simple webpage. It works !
Demo fiddle (I dont know how to put pure js in fiddle.net)
You can not just update the variable fromtop, that will have no effect on the page. You will have to update the top-value manually, the same way you read it.
<html>
<script type="text/javascript">
function menuanimate(){
document.getElementById("loginoutbox").style.top="0px";
}
</script>
<style type="text/css">
#image{
position:fixed;
top:0px;
left:80%;
}
#image:hover{cursor:pointer;}
#loginoutbox{
left: 80%;
width: 218px;
color: white !important;
position: fixed;
top: -20px;
background-color: #444;
height: 20px;
text-align: right;
}
</style>
<img style="margin-right: 94px;" src="http://www.kdogisthebest.webege.com/images/plustab.png" id="image" onClick="menuanimate();"/>
<div id="loginoutbox" class="ablack" style="top:-20px;">
<div style="display: inline-block; font-size: 14px; padding-left: 20px;">Hello Guest!</div>
<a id="register" href="#fallr-register" class="button">Register</a> |
<a id="signin" href="#fallr-signin" class="button">Login</a>
</div>
</html>
This is not the prettiest but I think this is what you are looking for as far as the end result...