Map not opening without refreshing page once closed - javascript

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.

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.

Using addClass to show an interval

I'm attempting to show an interval within a bar. Initially I was using the jQuery plugin for range, but it did not work like I wanted.
I have several different bulleted pointed within my bar. Whenever someone clicks within or near the point (in the class sliderInterval) I want the class rangeSection to be added to that area, basically showing that certain interval active. However, the rangeSection doesn't even show up, nor I am certain I am doing this correctly.
In addition, since I am doing this with intervals. I want to be able to give those intervals values, so that when one is selected I can display that value.
This is what I am trying to get it to look like:
I added a snippet to show what I have done so far. Any advise?
$(function interval() {
$(".slideInterval").click(function() {
$(this).addClass(".rangeSection");
});
});
#sliderBar {
border-radius: 15px;
width: 90%;
height: auto;
margin: 25px 10%;
background: blue;
}
.rangeSection {
width: 100px;
height: 100%;
color: purple;
position: absolute;
z-index: 1;
}
.intervalCircle {
border-radius: 50%;
height: 15px;
width: 15px;
background: red;
z-index: 1;
position: absolute;
}
.sliderInterval {
display: inline-block;
padding: 10px 8%;
}
.sliderInterval:first-child {
padding-left: 0;
}
.intervalCircle:first-child {
padding-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sliderBar">
<div class="rangeSection"></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle" ></span></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle" ></span></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
</div>
try this one.
You can use the .ready(); function of the jQuery library and set the .click() listener on all the .sliderInterval elements. I added the active class as well.
try it here:
https://jsfiddle.net/8cxLLts1/
$(document).ready(function(){
$(".sliderInterval").click(function() {
$(this).addClass("active");
});
});
EDIT: actually, if you use toggleClass() instead of addClass(), you'll be able to turn on and off a specific section
Using onclick in your html attribute and then binding a click event also in js could be considered redundant and unnecessary. Try removing the onclick attribute from your html and then adjust your js like so:
$(document).ready(function(){
})
.on('click', '.sliderInterval', function(){
$(this).addClass(".rangeSection");
});
Bind it to the document itself and this will help with your event delegation naturally. Also, take care to double check your class names - your js is missing the 'r' in '.sliderInterval'.

bPopup jQuery modal body not showing

So I'm trying to use bPopup as a modal window, but I can't see to get the actual modal window to pop up. I followed the instructions on the documentation (see http://dinbror.dk/bpopup/), but I can't seem to get it appear. Am I missing something?
<html>
<script type = "text/javascript" src = "jquery-1.11.3.min.js"></script>
<script type = "text/javascript" src = "jquery.bpopup.min.js"></script>
<p> Some text </p>
<div style="display:none" id='popup'>
Why is there no modal body???
</div>
<script type = "text/javascript">
$(document).ready(
function(){
$('p').click(function(){
$('#popup').bPopup();
})
})
</script>
</html>
The resulting script looks like this:
After clicking, the result is this:
However, on the documentation, the modal is as follows:
I'm really not sure what I'm missing. I'm probably just blind to something really obvious, any ideas?
Have you read this?
What is bPopup? bPopup is a lightweight jQuery modal popup plugin
(only 1.49KB gzipped). It doesn't create or style your popup but
provides you with all the logic like centering, modal overlay, events
and more. It gives you a lot of opportunities to customize so it will
fit your needs.
So you need to write your own styles for the modal window.
Do not give inline style style="display:none". Inline style will have highest priority and hence bpopup does not/cannot change that property.
Style it in css instead like this
#popup {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
$(document).ready(function() {
$('p').click(function() {
$('#popup').bPopup();
});
});
#popup {
background-color: #fff;
border-radius: 15px;
color: #000;
display: none;
padding: 20px;
min-width: 400px;
min-height: 180px;
}
.bClose {
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js"></script>
<p>Some text</p>
<div id='popup'>Why is there no modal body???
<span class="bClose">x</span>
</div>

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();
});
});

jQuery slideUp() trouble

I am having trouble developing a jQuery 'object'. I would like div1 (Refer to image below) to be the background div with an image in (Using a background image). I would then like div 2 (Refer to image below) to overlay div 1, which I can do. However, as I have little experience with jQuery it's the next part I'm struggling with. I would like, when you hover on div 2, I use jQuery slideDown() / slideUp() to show and hide div 3 (Refer to image below). It also needs to not close as it slides up (as the cursor will no longer be on div 2). Only when you're no longer hovering over the whole object will it close. I hope this makes sense... I just don't know where to start. If any more info is needed please ask.
Something like this should do it I believe, or at least it gives you a starting ground to play around with, and improve further.
Markup
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrapper {
float: left;
}
.one {
background-color: grey;
width: 100px;
height: 100px;
}
.two {
background-color: blue;
width: 100px;
height: 20px;
}
.three {
background-color: green;
width: 100px;
height: 100px;
display: none;
}​
JavaScript
$(function () {
$(".two").mouseenter(function (){
$(".one, .three").slideToggle();
});
$(".wrapper").mouseleave(function (){
$(".one, .three").slideToggle();
});
});​
A live example: http://jsfiddle.net/ZHxe5/1/

Categories