I have a group of images with captions (from http://www.hongkiat.com/blog/css3-image-captions/) and would like to be able to click on them and have them overlay either a hidden div or load an external page as an overlay (I'm not fussed on either as long as it works!). I'd also like each image to link to a different page/div. I've tried lots of things without success so much help would be appreciated. Here's my code for the images (and yes one appears twice for testing purposes):
<div id="mainwrapper">
<table>
<tr>
<td>
<div id="box-1" class="box">
<img id="image-1" src="img/agent.png"/>
<span class="caption full-caption">
<h3>Agent Demo</h3>
<p>Java Group Project</p>
</span>
</div>
</td>
<td>
<div id="box-2" class="box">
<img id="image-2" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
<td>
<div id="box-3" class="box">
<img id="image-3" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
</tr>
</table>
</div>
per your 2nd question in the comments "I can't even get a simple a link to bring up the popup. I'm kinda new to JQuery so how should I link to JQuery, where should I put the script and how do I implement the img and attr things you're on about?", here is a screenshot that shows everything you need.
I built a fiddle for you that does what you're trying to do. Without knowing which unique values of the images you intend to use to load the related page, i provided some sample code:
working fiddle is here:
http://jsfiddle.net/acturbo/YVBpj/
javascript:
$().ready(function() {
$("#close").on("click", function(){
$("#popup").hide();
});
// uncomment this line to attach this "showWindow" to all the images
// then, use $(this) to access the specific image that was clicked
//$("img").on("click", function(){
$("#showWindow").on("click", function(){
// when you switch to images, you can access unique attributes
// of the clicked image using attr()
// this will let you load unique pages for each image
// eg. can use 1 or 2
// var value1 = $(this).attr( "src" );
// var value2 = $(this).attr( "id" );
//$("#popup").load( value1 );
$("#popup").show();
});
});
html:
<div id="popup">
<p>this is hidden until the image is clicked</p>
Close Window
</div>
<a href="#" id="showWindow">Show Window - mimic an image click</p>
<div id="mainwrapper">
<table>
<tr>
<td>
<div id="box-1" class="box">
<img id="image-1" src="img/agent.png"/>
<span class="caption full-caption">
<h3>Agent Demo</h3>
<p>Java Group Project</p>
</span>
</div>
</td>
<td>
<div id="box-2" class="box">
<img id="image-2" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
<td>
<div id="box-3" class="box">
<img id="image-3" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
</tr>
</table>
</div>
css
#popup{
top: 10px;
left: 10px;
width: 300px;
height: 100px;
position: absolute;
background: red;
display: none;
}
That is easy with CSS only.
Take a llok at this fiddle : http://jsfiddle.net/VgLVq/
To make the div clickable, just wrap it in a <a> tag with the URL you want.
Then make the .box in position: relative and every of his children in position: absolute. I used the selector .box>*.
Then make the .caption in display:none and add this CSS to detecte the hover :
a:hover .caption{
display:block;
}
Related
So as the question says, I am trying to hover the class button1 and get the id of 'css'. With my current code, all I get is the id html. I need to get a unique id that's pertinent to which button I hover. I'm still newer to jquery and javascript in general but I can't seem to find any information on this topic so any reference source would be great too if possible.
Here's my code:
HTML
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
Jquery
('.button1').mouseover(function(event) {
$(".text").attr('id');
})
With your current code you get nothing, since .text does not have ID and result is never used. Use $(this).find('.Score').attr('id')[1].
Note few bug fixes:
('.button1').mouseover is missing $
You have nested .button1 (first one is not properly closed, use proper indentation for easier debugging), so it's impossible to find singe element, because you hover on top most element
$('.button1').mouseover(function(event) {
console.log($(this).find('.Score').attr('id'))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
I have some cards with an image, text, and link within them. Wrapping the card with an anchor tag is not possible in my case. Is it possible to target the anchor tag within the card and then make the entire card clickable to go to that link using jquery?
Ideal state: when you click anywhere on the card, the link is triggered and the user is taken to it.
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
<div class="item">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
</div>
</div>
</div>
This can be achieved with css, no javascript required.
.item {
position: relative;
}
.item a::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
The element that you want to make clickable gets a position: relative. That creates a new containment block. We then add a before pseudo-class to the link. Position it absolutely and stretch it over the entire containment block.
https://play.tailwindcss.com/q0Pje5H2Br
Yes, you can do this with JavaScript, though if you could solve the problem with not being able to make the card an anchor, that would be better. There's no reason you can't put a div in an a element, a's content model is transparent.
But if you can't:
$(document).on("click", ".card", function(event) {
const $this = $(this);
// Don't interfere with a click actually on the anchor
// (that way, the user can still right-click it and
// use the browser-supplied menu for oew in new tab,
// shift click, etc.)
if ($this.find($(event.target).closest("a")[0]).length === 0) {
// Not on the anchor, do it
event.preventDefault();
$this.find("a")[0].click();
}
});
Note that you have to call click on the DOM element, not the jQuery object. If you call it on the jQuery object, it won't trigger the default action.
Simply use an onclick handler on the div:
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card" onclick="this.querySelector('a').click(); return true;">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
<div class="item" onclick="this.querySelector('a').click(); return true;">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
</div>
</div>
</div>
Add a click handler for the card, and have it perform a click on the anchor:
$(".card").click(function() {
$(this).find("a")[0].click();
});
You can wrap block elements with <a>. It is valid HTML5 and renders your card clickable. You may need to adjust the css rules for the text inside this block however.
Edit: Since this isn't possible in your case, could you specify why?
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<a class="item" href="https://www.example.com/">
<div class="card">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a>Continue Reading</a> <!-- unsure about the correct tag here -->
</div>
</div>
</a>
<a class="item" href="https://www.example.com/">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a>Continue Reading</a> <!-- unsure about the correct tag here -->
</div>
</div>
</a>
</div>
</div>
</div>
I am trying to produce a tooltips style popup menu on a dynamic table generated using PHP. The table returns between 10 and 20 rows in a table. When I click on the item in the first table column, I want a popup submenu to appear in the style of a tooltip.
I've got the styling working to make it look how I want, but now I'm trying to get the functionality working!
I have managed to piece together the code to show and hide the div and it works well for one item. However, when I add more than one row in my test, it's very glitchy. I use the .click event, but with more than one item, you ended up having to double click. Can anyone help me get it to work better?
function myPopup(id) {
$("#myPopup" + id).click(function() {
if ($("#menudiv" + id).is(":hidden")) {
//$("#menudiv"+id).fadeIn(500);
$("#menudiv" + id).show();
} else {
$("#menudiv" + id).hide();
}
});
$("#menudiv" + id).mouseleave(function() {
$(this).hide();
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div style="padding-bottom:8px;">
Company Name
</div>
<div id="menudiv1" style="position: fixed; display: none;">
<div class="tooltipMenu">
<span class="tooltiptext">View | Edit </span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="padding-bottom:8px;">
Company Name
</div>
<div id="menudiv2" style="position: fixed; display: none;">
<div class="tooltipMenu">
<span class="tooltiptext">View | Edit </span>
</div>
</div>
</td>
</tr>
</table>
Because you add function myPopup in event click of a tag, but You re-call click event in function myPopup. Please view my code:
function myPopup(id){
if ($("#menudiv"+id).is(":hidden")) {
$("#menudiv"+id).fadeIn(500);
$("#menudiv"+id).show();
} else {
$("#menudiv"+id).hide();
} ;
$("#menudiv"+id).mouseleave(function(){ $(this).hide(); });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div style="padding-bottom:8px;">
Company Name
</div>
<div id="menudiv1" style="position: fixed; display: none;">
<div class="tooltipMenu">
<span class="tooltiptext">View | Edit </span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="padding-bottom:8px;">
Company Name
</div>
<div id="menudiv2" style="position: fixed; display: none;">
<div class="tooltipMenu">
<span class="tooltiptext">View | Edit </span>
</div>
</div>
</td>
</tr>
You can make it simpler if you know about jQuery Selector.
No need to define id for every single item. Here I change your original code.
$('.trigger').click(function() {
$(this).parent().next('.menu-wrap').show();
});
$('.menu-wrap').mouseleave(function() {
$(this).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div style="padding-bottom:8px;">
Company Name
</div>
<div class="menu-wrap" style="position: fixed; display: none;">
<div class="tooltipMenu">
<span class="tooltiptext">View | Edit </span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="padding-bottom:8px;">
Company Name
</div>
<div class="menu-wrap" style="position: fixed; display: none;">
<div class="tooltipMenu">
<span class="tooltiptext">View | Edit </span>
</div>
</div>
</td>
</tr>
Hope this can help you.
Use mouseover and mouseout and bind these function. Use mouseover on the wrapping element like td, so the mouseover and mouseout event work properly
The issue with the click is, if someone never enter in the tooltip then it will always show and will never get hidden until a mouseover event triggers on the tooltip.
$(document).ready(function() {
$(".mypopup").mouseover(function() {
$(this).find(".popupDiv").show();
}).mouseout(function() {
$(this).find(".popupDiv").hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="mypopup">
<div style="padding-bottom:8px;">
Company Name
</div>
<div id="menudiv1" class="popupDiv" style="position: fixed; display: none;">
<div class="tooltipMenu">
<span class="tooltiptext">View | Edit 1 </span>
</div>
</div>
</td>
</tr>
<tr>
<td class="mypopup">
<div style="padding-bottom:8px;">
Company Name
</div>
<div id="menudiv2" class="popupDiv" style="position: fixed; display: none;">
<div class="tooltipMenu">
<span class="tooltiptext">View | Edit 2 </span>
</div>
</div>
</td>
</tr>
</table>
I have the following code which mainly shows 4 Divs and each Div contains an image + text which displays underneath the image, here is my code:
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
the result will be as follows:
I want to make it so that when the user hovers over the last Div, it shows an arrow ">" on the image itself to mimic as if the user can show the next 4 items. Can anyone give advice on how I can implement this? At this stage, I just need to add a dummy arrow, nothing else.
now inside my last Div i added a class named class='profile-image':-
<div class="profile-image" style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
and then i defined the following css:-
.profile-image:hover .overlay {
position:absolute;
width: 48px;
height: 48px;
z-index: 100;
background: transparent url('/Resources/xt.png') no-repeat;
cursor: pointer;
}
but this did not have any effect...
Thanks
If you wrap all of your divs in a 'master' div (you could just give this a class of .master) then you will be able to use 'last-child' inside this class to target the last div that is inside it.
In the 'last-child' you can use :hover to allow you to display an image of an arrow when you hover over it. You could just add the arrow as a background image on the div and make this have 'visibility: visible;' or 'opacity: 1;' when it has an active hover state.
I hope this helps a bit :)
(edit: I would look to do this in a style sheet rather than inline styling)
When my page refreshes, I can see this div for few seconds and then it goes away. How can I control this behaviour?
<div ng-cloak="true" ng-show="userFromGuardian">
<div class="logo">
<img src="img/orangeIcon_normal.gif" style="vertical-align: top"/>
<div style="text-align: center; margin-top: -2%"><span style="font-family:Century Gothic;font-size:48px;font-weight:normal;font-style:normal;text-decoration:none;color: #FF6600;">Online Quotation Tool</span></div>
</div>
<div class="headerGuardian">
<span style="text-align: left;margin-left: 1%;font-weight: normal;">Welcome</span>
<span style="text-align: left"> {{user.firstName}} {{user.lastName}}</span>
<a style="margin-right: 1%;float: right" ng-click="logOut()">logout</a>
</div>
</div>
//checking Guardian user
$rootScope.userFromGuardian =false;
UserFromGuardian.get(function(data){
$rootScope.userFromGuardian = data.userFromGuardianFlag;});
You need to add style="display:none;"
<div ng-cloak="true" ng-show="userFromGuardian" style="display:none;">
Javascript and CSS can't be relied upon to hide your div immediately.
I don't know why you use ng-show="userFromGuardian"to the div.
If you remove ng-show="userFromGuardian" then div will show.