clickable figcaption link on top of image Wordpress - javascript

I'm helping a friend setting up a Wordpress page and I have an issue that I can't figure out how to fix.
I have added some image widgets to the sidebar that links to different categories on the site. The problem is that the image text should be on top of the image in a semi transparent box, and this box is not a clickable link. Is it possible to add the same link to the box?
The widget generates an HTML structure like shown in the example below and I have added some CSS to show how the semi transparent text box looks like.
figcaption {
position: relative;
height: 80px;
width: 300px;
background: white;
top: -235px;
left: 85px;
padding-top: 60px;
text-align:center;
opacity: 0.8;
font-weight: bold;
font-size: 140%
}
<figure>
<a href="some link">
<img src="http://static.highsnobiety.com/wp-content/uploads/2016/09/07200609/super-mario-run-iphone-7-01-480x320.jpg">
</a>
<figcaption>Super Mario</figcaption>
</figure>

Appearance > Customise > Additional CSS
figcaption
{
cursor: pointer;
pointer-events: none;
}

If you can't change the html, you'll have to use javascript/jquery to achieve this. In the WordPress widget manager, create a new plain text widget and paste this in:
<script>
jQuery(function($){
var $sidebar = $('.sidebar'); // change this selector to target your sidebar
$sidebar.find('figcaption').on('click',function(e){
e.preventDefault();
$(this).parents('figure').eq(0).find('a').click();
});
</script>
Or, to prevent Wordpress from adding <p> put it all on one line:
<script>jQuery(function($){var $sidebar = $('.sidebar'); $sidebar.find('figcaption').on('click',function(e){e.preventDefault();$(this).parents('figure').eq(0).find('a').click();});</script>

Related

How to create an interactive navigation, in a circular design, using HTML, CSS, and JQuery

// JavaScript Document
$('.page').hide();
$(".btns").click(function(e){
e.preventDefault(); //this method stops the default action of an element from happening.
var $me = $(this); //$(this) references .btns, the object in local scope.
var $myContent = $($me.attr('href')); //pulls href of page 01, 02, or 03.
$('.page').hide(); //hides all pages
$myContent.fadeIn();//fades in clicked href connected to btn
$(".btns").removeClass('selected');//
$me.addClass('selected');
});
*{
border-spacing: 0px;
}
body{
margin: 0px;
padding: 0px;
}
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em;
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
position: absolute;
top: 50%; left: 50%;
width: 4em; height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); }
<div class="body_content">
<div class="page" id="page_01">
<h2>1. Category 1</h2>
</div>
</div>
<div class="circle-container">
<nav class="navigation">
<a href="#page_01" class="btns deg0" >
<img id="one" src="imgs/button.png" alt="page01"/>
</a>
</nav>
</div>
I have a unique situation that I would like to discuss with you all. I am trying to create a web page that has a circular navigation, as shown here enter image description here
Each one of these buttons would display content when clicked, like an in-page link. The JQuery is as shown enter image description here
The concept seems simple enough, force all content to hide, when a user clicks a button, the page content linked to that button shows. It works when the links are inline or block display, but when in a circle, the links don't work, the button content doesn't show. Has anyone worked with a similar issue? Or would anyone have a potential solution? I apologize for the vagueness of the questions but the issue seems multi-faceted. Any advice or ideas would be greatly appreciated.
Are you sure your jQuery reference is working? I don't see any issue with the code, the click event should fire when you click on the links. Check the console for any errors, I strongly believe jQuery might not get loaded.

Can't get Modal to work with carousel-video sourced

So I have this carousel from http://kenwheeler.github.io/slick/. I decided with my carousel that once you click the image-a video appears. Well I want this video to load into a Modal Image-with a closeout function. The first line of code for div id....is the image onced clicked the video appears. The rest below it I'll just copy and paste the first part. (Repeat of the same image/video four times-until I decide to switch things out)
<section class="center slider">
<div id="video" style="display:none;"><iframe width="560" height="315" src="https://www.youtube.com/embed/36_e3qbYhEs" frameborder="0"></iframe></div>
<a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);">
<img id="videopic" src="images/350x300.png" alt="Video Picture" /></a>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
</section>
I have the JS and CSS all working fine I just can't implant a function where you click the image the "image(video)" will open in a new window. Sorry about my wording. I am beginner and learning as I go. I know what I want it to do but can't figure out how.
Please let me know if I need to provide anything further.
I think the term you're looking for that might help you in Googling would be that you want your video to open in a lightbox.
Answering specifically how to do this in your particular circumstance is too broad for this site, even if you give us more code to look at. But generally the way you can accomplish this is to use JavaScript to toggle a class on one or more elements when your slideshow images are clicked, and adding that class would trigger the video to show up, while clicking the exit button would remove the class so things go back to their original appearance.
Here is a really basic example, but you can basically take this concept and make it as simple or complicated as you want. You could, for example, toggle a class on the html or body tag of your page and then adjust the CSS of a bunch of stuff on the page based on whether that class is applied.
If you're using jQuery, there are plugins designed exactly for this purpose that will automatically give you a ton of settings to do things like automatically size and perfectly center your lightbox in the viewport and take care of mobile functionality and whatnot. Fancybox and Colorbox are a couple examples.
var lightboxImg = document.getElementsByTagName('img')[0];
lightboxImg.addEventListener('click', function(){
this.parentNode.classList.toggle('lightbox');
});
document.getElementById('exit').addEventListener('click', function(){
lightboxImg.parentNode.classList.toggle('lightbox');
});
/* relevant stuff */
#iframe {
display: none;
position: absolute;
top: -100px;
left: -100px;
}
#exit {
position: absolute;
top: 10px;
right: -290px;
padding: 5px;
background-color: white;
}
section div.lightbox #iframe {
display: block;
}
img:hover, #exit:hover {
cursor: pointer;
}
/* just for display purposes */
html, body {
height: 100%;
}
section {
width: 400px;
height: 300px;
background-color: gold;
position: relative;
left: calc(50% - 200px);
top: calc(50% - 150px);
}
section div {
position: relative;
top: 50px;
left: 50px;
width: 300px;
height: 200px;
}
<section class="center slider">
<div>
<img src="http://placehold.it/300x200?text=click%20me">
<div id="iframe"><img src="http://placehold.it/600x400?text=your%20iframe"><span id="exit">X</span></div>
</div>
</section>

Hide <span> until <div> is hovered over

I made this a couple of months back, but now I'm going through and re-tuning it. It's an image at the bottom of the page that when clicked it brings you to the top using JavaScript.
I already have the HTML, CSS and JS finished. But I can't get the CSS to work properly. I want a little message ("Scroll To Top") to remain hidden until the is hovered over, where it will appear.
I tried making a presentation here with JSFiddle, but it doesn't seem to want to work. (http://jsfiddle.net/9jvuoxra/1/)
Additionally Today I decided I want the image to become a background-image of the , but I can't get the to work correctly with {display: block;}. I've gotten it to work on other files in the past, but it doesn't want to work.
<!-- Scroll to the top option -->
<script>
function scroll () {
window.scrollTo (0, 0);
};
</script>
<div id="scroll-to-top">
<a onclick="scroll ()">
<span>Scroll To Top</span>
<img src="img/scroll-to-top.png" alt="Scroll To Top" title="Return to top">
</a>
</div>
<style>
div#scroll-to-top {margin-left: auto; width: 42px; height: 42px;}
div#scroll-to-top a {color: #ffffff;}
div#scroll-to-top a span {visibility: hidden;}
div#scroll-to-top a:hover span {visibility: visibile;}
div#scroll-to-top span {position: absolute; margin: 10px 0px 0px 0px; width: 42px; font-size: 10px; text-align: center;}
div#scroll-to-top img {display: block; width: 42px; height: 42px;}
div#scroll-to-top img:hover {cursor: pointer;}
</style>
scroll(X, Y) is already a defined javascript function, which is now replaced by the identical function scrollTo(X, Y), so using scroll() might not work always (as it is not working on jsfiddle). Instead you could write <a onclick="window.scrollTo(0, 0)"> to make it work.
For hiding the span, you may use jQuery.
Make sure to remove the visibility: hidden attribute also.
$(document).ready(function() {
// hide the span
$('#scroll-to-top span').hide();
// bind the hover event (mouseenter) to show the span and
// next hover event (mouseleave) to hide again
$('#scroll-to-top').hover(function(){
$('#scroll-to-top span').show();
}, function() {
$('#scroll-to-top span').hide();
});
});

Map not opening without refreshing page once closed

The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again
It is running jquery - here is the code
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_map_of_stocklists_link').click(function() {
//$('#popupdiv').show('slow');
$("#popupdiv").css('visibility', 'visible');
$("#mappy").css('opacity', '1');
});
$('.closepopup').click(function() {
$('#popupdiv').hide('slow');
});
});
</script>
The styling
<style>
#popupdiv
{
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 600px;
margin-top: -200px;
width: 960px;
margin-left: -500px;
padding: 20px;
}
#view_map_of_stocklists_link:hover {
cursor:pointer;
}
.closepopup {
margin-top: 60px;
border: 1px solid #ccc;
background-color: #000;
color: white;
cursor: pointer;
}
</style>
and then the HTML itself
<div id="popupdiv" style="visibility:hidden;">
<center>
<iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
<div class="closepopup" style="width:200px">Close</div>
</center>
</div>
<h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
<h5 class="skin-font-color1 p-wrapper"><!-- client txt --> <div id="view_map_of_stocklists_link" class="skin-font-color4">
<h4>View map of stockists</h4>
</div>
The website is http://www.tee-ze.co.uk/sosmoothies/
Cheers
You are setting 'visibility' to 'visible' instead of 'display' to 'block'.
When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:
$('#view_map_of_stocklists_link').click(function() {
$('#popupdiv').hide('slow');
});
Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.
Edit:
Sorry for complaining in may previous answer.
I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.
The way you're showing the popup map doesn't match the way you're hiding it.
You show it with:
$("#popupdiv").css('visibility', 'visible');
But you hide it with:
$('#popupdiv').hide('slow');
That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.
When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.
You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).
For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.

How to display tooltip when mouse hover iframe

I'm using Telerik Radeditor which is rich text area and the editor content is an iframe, something like below:
<iframe frameborder="0"
src="javascript:'<html></html>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;"
title="hello world"
id="contentIframe"></iframe>
My goal is to display the "hello world" tooltip when a user mouse hover the iframe area.
As you can see I put "title" attribute but it is not showing up.
To mimic the tooltip behavior I tried placing overlay div and title which worked but then I lost mouse control because of the overlay div.
I also desperately tried putting title in the iframe body but then I had to click inside of iframe to make it happen which is not the solution.
var iframe_html = $(wrapper).find("iframe").contents().find("html");
$(iframe_html).prop("title", "hello my tooltip 1");
var iframe = $(wrapper).find('iframe');
$(iframe).prop("title", "hello my tooltip 2");
var iframebody = $(iframe).contents().find('body');
$(iframebody).prop("title", "hello my tooltip 3");
I'm using jQuery UI 1.8.16 which does not come with Tooltip capability thus that cannot be an option..
Could anyone help me figure how to show the tooltip?
You are able to assign a title to the iframe but you wont be able to see it in the iframe.. Change the frameborder to "2" and move your cursor to it.. there you go..Title appears...
To see the title on iframe you must set the title of iframe content and not the iframe itself..
just like i've done below..
<iframe frameborder="0"
src="javascript:'<div id=\'hey\' title=\'Hello World\'>Helllo World</div>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;position:relative;"
title="hello world"
id="contentIframe">
</iframe>
Alternatively..
using jQuery
$(document).ready(function () {
$("#contentIframe").contents().find("body").attr('title','Hello World');
});
This is a fiddle for your reference..
I just added an iframe to the div in the w3 schools tooltip tutorial (TryIt editor here) and it worked perfectly. To my surprise.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #994444;
color: #ffffff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Proof of Concept</h2>
<p>This, cobbled from the W3 schools tutorial on CSS tooltips. I added an Iframe inside the div; one may still interact therewith, yet enjoy full tooltipitude.</p>
<p> So, move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Hello World</span>
<iframe height="600px" src="https://imgur.com/a/71J1gQZ" width="600px" ></iframe>
</div>
</body>
</html>
See it live here :
https://faustsstudy.blogspot.com/p/blog-page_14.html
but it requires support for data URIs.

Categories