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>
Related
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>
I'm relatively new to jQuery, and I'm experiencing some trouble with it. My assignment is to redesign a webpage and implement certain features using jQuery. Right now, I'm trying to create a dropdown menu for each "button" in my nav bar. When I hover over a "button" in the nav bar, a dropdown menu should show up. My jQuery appears to be working but the dropdown menu isn't showing up on the webpage...
Here is my code:
<head>
<title>Team Imperial College: Project Description</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="styles/normalize.css" type="text/css"/>
<link rel="stylesheet" href="styles/styles.css" type="text/css"/>
</head>
Here is the HTML code (nav bar and dropdown menu code):
<ul class="nav_bar">
<li class="dropdown">
Our Team
<ul class="dropdown_content">
<li>Meet the Team</li>
<li>Attributes</li>
</ul>
</li>
<li>Our Project</li>
<li>
Modelling
</li>
<li>Software</li>
<li>
Documentation
</li>
<li>
Human Centered Design
</li>
</ul>
Here is my CSS code:
html, body {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
background-color: #EDDBDB;
}
.nav_bar {
position: fixed;
top: 0px;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #F3F3FF;
overflow: hidden;
}
.nav_bar li {
float: left;
}
li a {
display: block;
color: #000000;
text-align: center;
padding: 24px 20px;
text-decoration: none;
font-size: 105%;
}
/*dropdown menu code*/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown_content {
display: none;
position: absolute;
background-color: #F3F3FF;
min-width: 160px;
z-index: 1;
}
.dropdown_content li a {
color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown_content li a:hover {
background-color: #DBDBE5;
}
.dropdown:hover .dropdown_content {
display: block;
}
/dropdown menu code/
And here is my jQuery code:
$(document).ready(function() {
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
});
$('.dropdown_content li a').hover();
});
Please help! Help will be greatly appreciated, thanks!
First test i would make is make dropdown_content visible since begin, to make sure the toggle function works.
Then you can do this test:
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
alert('Over here');
});
Check how many times "Over here" appears.
Having those answers will help you on the way out of this.
if (jQuery) {
alert(“jquery is loaded”);
} else {
alert(” Not loaded”);
}
it seems you haven't addressed the event on mouse out. try changing this code:
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
});
to this:
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
}, function() {
$('.dropdown_content').toggle();
});
if you want it only to be trigger on when entering it do this:
$('.dropdown').mouseenter(function() {
$('.dropdown_content').toggle();
});
i suggest looking at this for better detail.
EDIT:
how toggle works is by making the element's display variable to none that essentially means that it does not exist on the page anymore.
if you wanted it to toggle on hover, you would need to toggle the opacity between 0 and 1.
best method:
create a css class
.hidden {
opacity: 0;
}
edit JQuery code
$(document).ready(function() {
$('.dropdown').hover(function() {
$('.dropdown').toggleClass('.dropdown', "hidden");
//you can use this for multiple elements
//$(this).toggleClass(this, "hidden");
});
$('.dropdown_content li a').hover();
});
deprecated method:
$(document).ready(function() {
$('.dropdown').hover(function() {
$('.dropdown_content').toggle(() => {
$('.dropdown_content').css({opacity: "0"});
}, () => {
$('.dropdown_content').css({opacity: "1"});
});
});
$('.dropdown_content li a').hover();
});
note: () => {} is shorthand for a callback function
I have several divs which are generating dynamically which share same class names, If I hover on parent(myDiv) need to trigger an event and on hover need to add a class to myDiv(child button) and once I clicked on parent div(myDiv) need to unbind hover action?
<div class="myDiv">
<div class="myBtn"></div>
</div>
<div class="myDiv">
<div class="myBtn"></div>
</div>
<div class="myDiv">
<div class="myBtn"></div>
</div>
Tried in the below way
$(document).on('click', '.myDiv', function() {
//some task will goes here
$(this).unbind('hover');
}).hover(function() {
$(this).find('.myBtn').css('background','#666666');
});
I believe what you are looking for is the .off() function.
Here is the jsFiddle link.
JavaScript:
$(document).on('click', '.myDiv', function() {
//some task will goes here
$(this).off();
});
$('.myDiv').hover(function() {
$(this).find('.myBtn').toggleClass('active');
});
CSS:
.myDiv {
display: block;
height: 100px;
width: 100px;
background-color: red;
}
.myBtn {
display: block;
height: 50px;
width: 100px;
background-color: white;
}
.active {
background-color: gray;
}
I hope this helps.
So I onClick I add a class to my container. When I select my button, I hide the content, add some transition to flip the container then display some info. Below is the code i'm using..
$('.btn-click').on('click', function() {
$('.content').toggleClass('hidden');
$('.card_container').delay('slow').toggleClass('class_active');
$('.info').toggleClass('display');
});
and the styles for the class are:
transform: rotateY(180deg);
transition: .7s ease-in-out;
background: black!important;
The issue is, the hide and show of .content class is too slow so I can see it before the .card_container has finished rotating. How can I delay the rotation. I tried .deley('slow') but didn't work?
I've added images below to show before & after,
Before:
After:
EDIT
So here's a fiddle for better understanding of my issue, sorry! https://jsfiddle.net/74vgvvhc/
As you can see, it a slight delay on the content (the text) when transitioning. I want the content to fade out, flip the card, then fade the other content in.
You can use fadeToggle with a delay
$('.container').on('click', function() {
$('.content').toggleClass('hide');
$('.container').toggleClass('card_active');
$('.info').delay(500).fadeToggle('display');
})
JsFiddle https://jsfiddle.net/kjarriho/74vgvvhc/7/
Hopefully this helps!
Just toggle the class '.info' to '.display' after a delay of 700 milliseconds as you have given the transition time 'transition: .7s ease-in-out;' for '.card_active' in css.
$('.container').on('click', function() {
$('.content').toggleClass('hide');
$('.container').toggleClass('card_active');
$('.info').delay(700).fadeToggle('display');
})
You can check the whole thing here https://jsfiddle.net/Rit_Design/eubrqnew/
You can toggle the info and card_active classes in a setTimeout after 700ms. This works, but isn't very elegant:
$('.container').on('click', function() {
$('.content').toggleClass('hide');
$('.container').toggleClass('card_active');
setTimeout(function() {
$('.info').toggleClass('display');
$('.container').toggleClass('card_active');
}, 700);
})
html,
body {
background: lime;
}
.container {
width: 150px;
height: 150px;
background: white;
border: 5px solid white;
}
.content {
display: block;
}
.info {
display: none;
}
.display {
display: block;
}
.hide {
display: none;
}
.card_active {
transform: rotateY(180deg);
transition: .7s ease-in-out;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<span class='content'>The content</span>
<span class='info'>The info</span>
</div>
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);
});