Develop Reference

on click function to reveal hover overlay - appears on click but won't disappear on 2nd click

I have a portfolio grid of images and when a user hovers or taps on a mobile a transparent overlay with some text and a button appears
I am using the on click function
It works fine on my touch screen laptop but not on my iOS phone or tablet
The overlay appears on first tap, but when I tap again it does not disappear unless I tap another grid image.
I would like it to disappear on 2nd tap
I have tried various ways of making this work, and the closest I have got it for it to disappear when another grid image is tapped
Here is my code:
HTML
<div class="col-xs-12 col-sm-7"><div class="image-wrap">
<div onclick="on()">
<img src="assets/images/pic.jpg">
<div class="overlay blue">
<h3>Portfolio item 1</h3>
<hr>
<p><strong>Coming Soon</strong><br> some overlay text here</p>
<br>
View Website
</div>
</div>
</div>
</div>
JS
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
CSS
.image-wrap {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
}
}
.image-wrap:hover .overlay {
opacity: 1;
}
.red {
background: rgba(102,67,154,0.7);
}
.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}
.purple2 {
background: rgba(71,13,142,0.7);
}
}
I initially tried this with just CSS which gave me the desired result on all devices apart from iOS!
So I have decided to use the on click function to be more sure it works on all devices. I added the on click function to my existing code which I wrote to be used with CSS, but as I am rather new to JS I am wondering if I have it in the wrong place (the on-click)? I have tried lots of variations but this is the best I can get it to work
Any ideas of suggestions on how I can make the overlay disappear on the 2nd click would be great!
js fiddle
https://jsfiddle.net/49h450g9/14/
Please note: This works fine on touch-screen laptops, just not mobiles!
Thanks!

Your functions on and off on jsfiddle example are not working at all. What happening is your hover effect on normal screen which as the behavior of mobile work like focus on mobile device.
Moreover, from your description here I believe that you have more than one portfolio on your project. So you have several element with the id overlay and multiple use of same id is not validate for html and also will cause JavaScript error.
To let your project work properly follow my list below:
Make sure you have jQuery added on your project (generally before </body>)
Now let us thinks of these portfolio item below
<div class="portfolio">
<img src="images/portfolio-1.jpg" alt="...">
<div class="overlay">Link</div>
</div>
<div class="portfolio">
<img src="images/portfolio-2.jpg" alt="...">
<div class="overlay">Link</div>
</div>
<div class="portfolio">
<img src="images/portfolio-3.jpg" alt="...">
<div class="overlay">Link</div>
</div>
Then give the normal hover css styles inside media query like this. So that it never effect your js styles (I decide medias less than 992px as mobile device):
.portfolio{
background-color: #f1f1f1;
position: relative;
}
.portfolio .overlay{
background-color: rgba(0, 0, 0, 0.7);
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.3s ease;
width: 100%;
height: 100%;
}
#media all and (min-width:992px){
.portfolio:hover .overlay{
opacity: 1;
}
}
Now with jQuery you can use event while user click any of the .portfolio item and toggle a class on it by which we will add further css to it:
$(document).ready(function(){
'use strict';
$(.portfolio).on('click', function(){
$(this).siblings('.portfolio').removeClass('hovered');
$(this).toggleClass('hovered');
});
});
Now it will add hovered class on 1st click and remove the hovered class on 2nd click. Also it will remove .hovered from other portfolio items. Now add the same css to it as the hover effect:
.portfolio.hovered .overlay{
opacity: 1;
}

Try this:
$("*").on("click, touchend", function(e) { $(this).focus(); });
or to achieve the opposite;
$("*").on("click touchend", function(e) { $(this).hover(); });
However the hover event doesn't work well on ios or other mobiles.
Another suggestion is to try replace any css using
:hover with :active.

Make popup have smart positioning

I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?

A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}

How to make toggle off when on mouse over is done?

I have created an element that is displayed when I am over a particular box.
If I move my mouse over the box I can see my element but then I need to move my mouse in and out twice for the element to disappear. How can I fix it? Shouldn't the element hide itself once I move the mouse out?
How do I make my box only show when mouse is over the box?
<script>
$("#box").on("mouseover",function()
{
$("#my-box").toggle();
});
</script>
I tried to hide it myself, but it didn't work:
$("#box").on("onmouseout", function()
{
$("#my-box").hide();
});

You can use mouseover and mouseout in a same eventlistener like one below:
$("#box").on("mouseover mouseout",function()
{
$("#my-box").toggle();
});
#my-box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
Box here
</div>
<div id="my-box">
My Box
</div>
FIDDLE DEMO

The problem with your code is you're using onmouseout instead of use mouseenter and mouseleave method.
You can use hover:
$('#box').hover(function(){
$('#my-box').toggle();
});

You can use combination of both
$("#box").mouseover(function() {
$("#my-box").show();
}).mouseout(function() {
$("#my-box").hide();
});
Example

jQuery Solution
HTML
<div class="box" id="action"></div>
<div class="box" id="hidden"></div>
JS
$("#action").on("mouseover mouseout",function()
{
$("#hidden").toggle();
});
CSS
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#hidden{
display: none;
}
JSFiddle
Allthough it would be better doing this by just using CSS.
CSS Only Solution
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#action:hover + #hidden{
display: block;
}
#hidden{
display: none;
}
JSFiddle

Changing image within div when clicked

Spent a couple of days on this now and need some guidance. I have a toggle with an image within the div. Basically when the div is clicked the image within it should change to a different image.
Here is a link to the jsfiddle, so you can see the image at the top which should change once the whole toggle area is clicked.
http://jsfiddle.net/VLe8g/
Also here is the code
HTML
<div class="toggle-wrap">
<div class="trigger">
<div class="one-third"><img src="http://placehold.it/200x200" /></div>
<div class="two-thirds column-last">This is where the heading goes <br />
This is where the description goes<br />
Toggle Open</div>
</div>
<div class="toggle-container">
<div class="one-third">First column This is where the heading goes This is where the heading goes</div>
<div class="one-third">Second column This is where the heading goes This is where the heading goes</div>
<div class="one-third column-last">Third column This is where the heading goes This is where the heading goes</div>
</div>
</div>
CSS
.toggle-wrap {
float: left;
width: 100%;
margin-bottom: 5px;
}
.trigger {}
.trigger a {
display: block;
padding: 10px;
padding-left: 15px;
text-decoration: none;
font-weight: bold;
color: #1D1D1B;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
background: url(tobeadded) no-repeat right 15px #F3F3F3;
}
.trigger.active a {
background: url(tobeadded) no-repeat right -20px #F3F3F3;
}
.toggle-container {
overflow: hidden;
float: left;
padding: 15px 15px 0 15px;
}
.one-third, .two-thirds {
display: inline;
float: left;
margin-right: 4%;
}
.one-third {
width: 30.66%;
}
.two-thirds {
width: 64%;
}
JAVASCRIPT
$(".toggle-container").hide();
$(".trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$(".trigger").click(function(){
$(this).next(".toggle-container").slideToggle();
});
Hope you guys can help me out.
Thanks.

Demo here
Try this:
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://jsfiddle.net/favicon.png');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://placehold.it/200x200');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});

$(this).find("img").attr("src", "http://placehold.it/400x400");
will change the image from a 200x200 to a 400x400. You can add a class to both of them (i.e. class=small, class=big) which jQuery can use to identify which one is currently being displayed and toggle between them.

assign an id to image tag like i did
<img id="test" src="http://placehold.it/200x200" />
and use the following code:
$(".toggle-container").hide();
$(".trigger").toggle(function(){
$(this).addClass("active");
$('#test').attr('src','http://placehold.it/200x200');
}, function () {
$(this).removeClass("active");
$('#test').attr('src','https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/s200x200/851558_201013993381868_2094147002_n.png');
});
$(".trigger").click(function(){
$(this).next(".toggle-container").slideToggle();
});

Add the id attribute to your img, and then change the src attribute every time the toggle handler is executed.
The img definition should something like this:
<img id="myImage" src="http://placehold.it/200x200" />
and your toggle handler should look like this:
$(".trigger").toggle(function(){
$(this).addClass("active");
$("#myImage").attr('src', 'http://placehold.it/some_other_image');
}, function () {
$(this).removeClass("active");
$("#myImage").attr('src', 'http://placehold.it/200x200');
});

Display value in jQueryUI ProgressBar

I've set up a simple jQuery UI ProgressBar:
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 35
});
});
</script>
<div id="progressbar"> </div>
Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").
I can't seem to get this to work.
Bonus Question: How do I format the displayed text (e.g. color, alignment)?

Instead of introducing another element (span) and a new style, leverage what is already there like this:
var myPer = 35;
$("#progressbar")
.progressbar({ value: myPer })
.children('.ui-progressbar-value')
.html(myPer.toPrecision(3) + '%')
.css("display", "block");
The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).
If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:
.ui-progressbar-value {
font-size: 13px;
font-weight: normal;
line-height: 18px;
padding-left: 10px;
}

The way I did it was:
<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>
You can adjust the margin-top and margin-left so that the text is in the center of the progress bar.
Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page
Hope this help

After fiddling around with some solutions, based on the answers here, I've ended up with this one:
Html:
<div id="progress"><span class="caption">Loading...please wait</span></div>
JS:
$("#progress").children('span.caption').html(percentage + '%');
(To be called inside the function that updates the progressbar value)
CSS:
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
Advantages:
Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
No JS strange manipulation
Simple and minimal CSS

This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.
Html:
<div class="progress"><span>70%</span></div>
Script:
$(".progress").each(function() {
$(this).progressbar({
value: 70
}).children("span").appendTo(this);
});
CSS:
.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}​
Working sample: http://jsfiddle.net/hasYK/

I used this:
<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>

<style>
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
</style>
</head>
<body>
test
<div id="progressbar"></div>
<br>
test2
<div id="progressbar2"></div>
<script>
$("#progressbar").progressbar({
max : 1024,
value : 10
});
$("#progressbar2").progressbar({
value : 50
});
$(document).ready(function() {
$("#progressbar ").children('div.ui-progressbar-value').html('10');
$("#progressbar2 ").children('div.ui-progressbar-value').html('50%');
});
</script>
</body>