I found this code on stackoverflow.com and I would like to ask how do I do the same but without using bootstrap, I would only like to use jquery (if needed) ?
The code below works great but I would like to know how would I do this without using bootstrap.
Thanks for any help.
CODE:
<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type='text/javascript'>
//<![CDATA[
$(window).on('load', function() {
// On first hover event we will make popover and then AJAX content into it.
$('[data-poload]').hover(
function (event) {
var el = $(this);
// disable this event after first binding
el.off(event);
// add initial popovers with LOADING text
el.popover({
content: "loading…", // maybe some loading animation like <img src='loading.gif />
html: true,
placement: "auto",
container: 'body',
trigger: 'hover'
});
// show this LOADING popover
el.popover('show');
// requesting data from unsing url from data-poload attribute
$.get(el.data('poload'), function (d) {
// set new content to popover
el.data('bs.popover').options.content = d;
// reshow popover with new content
el.popover('show');
});
},
// Without this handler popover flashes on first mouseout
function() { }
);
});//]]>
</script>
<img src="alerts.gif" data-poload="test3.php?id=1"><BR><BR><BR>
<img src="alerts.gif" data-poload="test3.php?id=2"><BR><BR><BR>
<img src="alerts.gif" data-poload="test3.php?id=3"><BR><BR><BR>
Check this:
// On first hover event we will make popover and then AJAX content into it.
$('[data-poload]').hover(function(event) {
var el = $(this);
// Commenting this (For testing purposes)
$.get(el.data('poload'), function(d) {
// set new content
el.find('.tooltiptext').text(d);
});
});
.tooltip {
position: relative;
display: table;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
border-radius: 6px;
padding: 5px 10px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" data-poload="//demo2307137.mockable.io/test">
<img src="alerts.gif"/>
<br/><br/><br/>
<span class="tooltiptext">Loading...</span>
</div>
<div class="tooltip" data-poload="//demo2307137.mockable.io/test">
<img src="alerts.gif"/>
<br/><br/><br/>
<span class="tooltiptext">Loading...</span>
</div>
Related
I'm making a WordPress website where I use a tooltip to show when a user hovers over an icon. Now on mobile, I want the hover function to be done with a clicked function so I created a jQuery to handle it. I'm new to jQuery so that is probably the issue, or I'm doing it wrong and I can do it in another way. The issue is now that wont all the the tooltip-text be active no one someone clicks one tooltip icon?
It works with CSS to just use display: block/none but I want the click function to work too. And then style it with opacity and transition
$(function() {
$('.tooltip').clicked(function() {
$('.tooltiptext').addClass("tooltip-clicked");
})
})
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip:hover .tooltiptext {
display: block;
visibility: visible;
opacity: 1;
}
.tooltip-text {
display: none;
visibility: hidden;
}
.tooltip-clicked {
display: block;
visibility: visible;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="tooltip">
<p class="tooltip-text">lorem ipsum...</p>
</i>
I have modify your css content to make it clickable and simple enough to tell the difference and modify your jQuery code:
$(document).ready(function(){
$('.tooltip').click(function (){
$('.tooltip').addClass("tooltip-clicked");
})
})
Snippet:
$(document).ready(function(){
$('.tooltip').click(function (){
$('.tooltip').addClass("tooltip-clicked");
})
})
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip:hover {
color:green;
}
.tooltip.tooltip-clicked:hover {
color:blue;
}
.tooltip-clicked {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="tooltip">
<p class="tooltip-text">lorem ipsum...</p>
</i>
The issue is here:
jQuery('.tooltip').clicked(function (){
change the clicked to click and tooltiptext to tooltip-text like:
$(function(){
$('.tooltip').click(function (){
$('.tooltip-text').addClass("tooltip-clicked");
// put your tooltip logic here
});
});
.tooltip-clicked {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="tooltip">
<p class="tooltip-text">lorem ipsum...</p>
</i>
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 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);
});
I have an image with an overlay DIV which shows 2 images when I hover on the image, this works fine, but I want it to be dynamic and work for countless images on the page, currently it works for the first picture only, I'm not that good with javascript and jquery and would appreciate your help on this one.
Jquery Code:
$("#imageOverlay").hover(
function() {
$(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});
HTML Code:
<div id="imageOverlay">
<div id="hover">
<img src="http://placehold.it/100x30&text=Full View" />
<img src="http://placehold.it/100x30&text=Similar" />
</div>
<img src="http://placehold.it/1000x1000&text=Thumbnail">
</div>
CSS Code:
#imageOverlay {
display: inline;
position: relative;
}
#imageOverlay #hover {
display: none;
position: absolute;
margin-top: 10px;
margin-right: 10px;
z-index: 2;
}
#imageOverlay #hover a {
width: 100px;
height: 30px;
display: block;
margin-bottom: 5px;
}
Use a class for #imageOverlay and #hover, you can only have one instance of an ID, so when you have more than one of those IDs, the function is only finding the first one. Also, just fade the container box, not each individual image. Also, use stop() before an animation to make sure you don't get weird behavior when people are mousing on and off your element. Then, putting the main image first ensures that the hovered images are "on top" without having to worry about z-index.
HTML
<div class="imageOverlay">
<img src="http://placehold.it/1000x1000&text=Thumbnail">
<div class="hover">
<img src="http://placehold.it/100x30&text=Full View" />
<img src="http://placehold.it/100x30&text=Similar" />
</div>
</div>
JS
//fade out the images initially
$(".imageOverlay .hover").fadeTo(0, 0)
$(".imageOverlay").hover(
function() {
$(this).find(".hover").stop().fadeTo(200, 1);
},
function() {
$(this).find(".hover").stop().fadeTo(200, 0);
} //when writing clean code, be sure your closer ends at the same indent as your opener
);
CSS
.imageOverlay {
display: inline-block;
position: relative;
}
.imageOverlay .hover {
position: absolute;
top: 10px;
right: 10px;
}
.imageOverlay .hover a {
width: 100px;
height: 30px;
display: block;
margin-bottom: 5px;
}
And your images should show up on top when you hover!
Make #imageOverlay a class and apply it to multiple attributes in your html.
css:
.imageOverlay
//css rules
jquery:
$(".imageOverlay").hover(
function() {
$(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});
html:
<div class="imageOverlay">
// do stuff
</div>
<div class="imageOverlay">
// do stuff
</div>
I'm following this tutorial to add a simple jquery tooltip. The tutorial uses three images to construct the tooltip background but I only want to use one. Right now I'm trying to make the tooltip appear when I hover over certain text. I don't know if I'm making a simple mistake or if the code doesn't make sense. Either way, the tooltip won't appear when I hover over the text.
Here is my version of the script:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.toolTip').hover(
function() {
this.tip = this.title;
$(this).append(
'<div class="toolTipWrapper">'
+'<div class="toolTipPic">'
+this.tip
+'</div></div>'
);
this.title = "";
this.width = $(this).width();
$(this).find('.toolTipWrapper').css({left:this.width-22})
$('.toolTipWrapper').fadeIn(300);
},
function() {
$('.toolTipWrapper').fadeOut(100);
$(this).children().remove();
this.title = this.tip;
}
);
});
</script>
<style type="text/css">
.toolTip {}
.toolTipWrapper {
width: 175px;
position: absolute;
top: 20px;
display: none;
color: #FFF;
font-weight: bold;
font-size: 9pt;
}
.toolTipPic {
width: 175px;
background: url(tooltip.png) no-repeat;
}
</style>
</head>
<body>
<p class="toolTip" title="This is the tooltip text">Hover over me for tooltip </p>
</body>
</html>
On this line:
$(this).find('.toolTipWrapper').css({left:this.width-22});
You setting the left property to the width of the p tag, but you haven't set a width on the p tag so its width is the whole width of the page. For example when I tired this it set left to '1247px' which was of to the side of the browser window.