I am having an issue. I want to have two inline javascript popups on a web page. Here is the javascript:
<script type="text/javascript">
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target"
});
});
var popup2;
Sys.require(Sys.components.popup, function () {
popup2 = Sys.create.popup("#popup2", {
parentElementID: "target"
});
});
</script>
Here is the content of the page:
content
<span id="target" style="position: absolute; top: 50%; left: 40%; margin-top: -125px; margin-left: -200px;"></span>
<div id="popup" style="background: #ff6a00; color: #000; padding: 15px; margin: 0px">
Popup #1
</div>
<div id="popup2" style="background: #ffd800; color: #000; padding: 15px; margin: 0px">
Popup #2
</div>
content
<script>Sys.onReady(function () { popup.show(); })</script>
<script>Sys.onReady(function () { popup2.show(); })</script>
Both popups target the same location on the page. So I would expect the second one to overlap the first. The first popup is correctly popping up. The second is actually appearing in the page, it isn't popping up at all. As you can see the content on the page is going around it:
Why is this happening and how do I fix it?
Related
I have a web page and I want to make a div that appears on the right side of screen by click a button (both div and button have fixed position)
I made it appear by using jQuery fadein/out
it works fine but when I click the button, the page slides to top automatically
htmlCode:
<div class="fixedDiv">
<div class="fixedDiv liveSupportFrame" style="background: #f8aa00;display: none" id="lsf">
<div class="container" style="background-color:#d8d6d6;">
............
</div>
</div>
<a class="btn btn-warning sideBtn" onclick="showOrHideLiveSupport();" role="button" href="#">FAQ</a>
CSS code:
.fixedDiv{
position: fixed;
bottom: 25%;
right: 0em;
}
.fixedDiv .liveSupportFrame{
margin-right: 2em;
margin-bottom: 1em;
font-size:1.6vw;
bottom: 30%;
}
JS code:
var isLsfOpen = 0;
function showOrHideLiveSupport() {
if(!isLsfOpen){
showLiveSupport()
}
else{
hideLiveSupport()
}
}
function showLiveSupport() {
$('#lsf').fadeIn();
isLsfOpen=true;
}
function hideLiveSupport() {
$('#lsf').fadeOut();
isLsfOpen=false;
}
That's because of href="#". Use event.preventDefault(); in your handler.
// 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.
I've already tried to find out how to actually do it but the codes are always different and nothing works. I always end up ruining the link or the popup itself. So, I've got this code here:
.popup {
position:fixed;
display:none;
top:0px;
left:0px;
width:100%;
height:100%;}
#displaybox {
width:460px;
margin:50px auto;
background-color:#000000;}
.displaybox {
display:block;
position:relative;
overflow:hidden;
height:800px;
width:550px;}
.displaybox iframe {
position:absolute;}
<link><a id="object">click link</a></link>
<script>
$(function(){
$("link a").click(function(){
id = $(this).attr("id");
$(".popup:not(."+id+")").fadeOut(); $(".popup."+id).fadeIn();
});
$("a.close").click(function(){
$(".popup").fadeOut();
});
});
</script>
<div class="popup object">
<div id="displaybox"><a class="close">x</a>
<br>
<div class="displaybox"><iframe src="{theiframeblock}" height="800" frameborder="0" width="550"></iframe></div>
</div>
And I want to only load the iframe-block when I click on the "click link" link. How do I have to change the script for that? Any suggestions? :)
Update
The snippet I provided was pretty simple, so I assume when you tested it, you either missed some of the code or placed things in the wrong order, or your site is interfering somehow.
So what I did was made the primary page (index.html) with everything it needs to function on it's own. I made a second page as well (target.html) which is the test page that resides in the iframe.
Here's the DEMO
Simplified your functions by:
giving your popup an id #tgt
removed that <link> element; it's not an anchor <a> it's basically for external stylesheets
gave each anchor an empty href attribute
placed e.preventDefault() in each click function to avoid the <a> default behavior of jumping to a location.
replaced the iframe's src={..} template with the root, you can change that back, I just did that so the demo can function.
$(function() {
$("a.open").click(function(e) {
$('#tgt').fadeIn();
e.preventDefault();
});
$("a.close").click(function(e) {
$("#tgt").fadeOut();
e.preventDefault();
});
});
.popup {
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#displaybox {
width: 460px;
margin: 50px auto;
background-color: #000000;
}
.displaybox {
display: block;
position: relative;
overflow: hidden;
height: 800px;
width: 550px;
}
.displaybox iframe {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click link
<div id="tgt" class="popup object">
<div id="displaybox">X
<br>
<div class="displaybox">
<iframe src="/" height="800" frameborder="0" width="550"></iframe>
</div>
</div>
You can use:
$("#object").click(function() {
$("iframe").attr("src", "http://www.your-url.com");
});
Won't allow cross-origin requets
You can do it easily by using jQuery
Try this - https://jsfiddle.net/van06539/
HTML-
Click Link
<div id="iFrameContainer">
<iframe src="http://www.bbc.com" id="bestIframeEver" height="600" width="300" style="display:none;">
</iframe>
</div>
Javascript -
var isOpened = false;
$(document).ready(function() {
$("#openFrame").click(function() {
if (!isOpened) {
$("#bestIframeEver").fadeIn(1000);
} else {
$("#bestIframeEver").fadeOut(1000);
}
isOpened = !isOpened;
});
});
You can toggle the open / close state of the iframe
I have JavaScript that makes it so that when you click on a string of text it creates a div that slides down and expands an area bellow it to show more information. I want to be able to have a link on a different page of my website that when clicked takes you to the page with the string of text ALREADY clicked on and expanded. How would I do this?
JSFidldle: http://jsfiddle.net/hr07tn16/2/
JavaScript:
$('.moreInfo').on('click', function(){
var target = $(this).data('target');
$('.expandable').not('.' + target).slideUp(500, function(){
$('.' + target).slideDown(500, function(){
});
});
});
HTML
<div class="moreInfo" data-target="red">More Info</div>
<div class="moreInfo" data-target="green">More Info</div>
<div class="expandable red" style="display: none;">RED</div>
<div class="expandable green" style="display: none;">GREEN</div>
CSS:
.expandable {
width: 997px;
height: 300px;
}
.red {
color: white;
position: relative;
top: 380px;
border: 1px solid rgba(0,0,0,.1);
}
.green {
color: white;
position: relative;
top: 380px;
border: 1px solid rgba(0,0,0,.1);
}
You could add a hash to the link on your other page and, if the hash is present trigger the click. You could also use a flag to use the animation or not depending on whether is an automatic trigger or a manual one.
One thing you can try is redirecting to that page with a POST variable set indicating the element you would like expanded. Then on the page being directed to, have an onLoad() function which checks if the variable is set and then does what you want if it is.
onLoad()
I am creating a JavaScript popup. The code is as below.
The HTML:
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h2>Popup Content Here</h2>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</center>
</div>
</div>
The CSS:
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("images/pop-bg.png") repeat top left transparent;
z-index: 1001;
}
#popup {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
height: 361px;
margin: 5% auto;
position: relative;
width: 597px;
}
The Script:
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 0);
}
The jsFiddle Link:
http://jsfiddle.net/K9qL4/
The Issue:
I need to close this popup onClick outside. I am able to close it on click of submit inside.
What I tried to make it close onClick outside?
The Script:
function hideNow()
{
document.getElementById('ac-wrapper').style.display = 'none';
}
The HTML Code:
<div id="ac-wrapper" style='display:none' onClick="hideNow()">
What actually happened?
It closes the pop up on outside click, but also closes the pop up when I am trying to access the contents inside.
I am stuck up on this issue. Can someone guide me?
Thanks.
You need to add some code to check if you are clicking on the wrapper. Something like this would work:
<div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
You need to add event to your function call.
And in your JS code:
function hideNow(e) {
if (e.target.id == 'ac-wrapper') {
document.getElementById('ac-wrapper').style.display = 'none';
}
}
In the function you check what the event.target is (the element you actually clicked on). If the id matches 'ac-wrapper', you know you clicked on the correct element.
See Fiddle
You can use the method stopPropagation() of the event.
see the fiddle : http://jsfiddle.net/xWrj9/
$('#popup').click(function(e){ e.stopPropagation(); });