I have a page that I want to show a div overlay with a popup. Basically, like colorbox. But I want this to be permanent. They should not be able to click out of the div. Inside of the div should be contents from popsurvey.com in an iframe. The link I need to frame is this -> http://www.popsurvey.com/s/5gzmqc/0x5513 - How do you recommend this be done? Thanks.
<script>
$(document).ready(function() {
$.colorbox({iframe:true, width:"620", height:"591", href:"http://www.popsurvey.com/s/5gzmqc/4zk4lm?embed=true", opacity: ".3"});
});
</script>
I've created a solution in jquery which is light enough and simple enough to suit your needs (I hope), Clean and simple is usually the best way to do these sort of things and 99.99% of the time it's pretty redundant to use larger plugins or prebuilt solutions.
jsfiddle demo
jsfiddle
The html:
<div id="block"></div>
<div id="iframecontainer">
<div id="loader"></div>
<iframe></iframe>
</div>
The css:
#iframecontainer {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222;z-index: 999999;}
#iframecontainer iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }
#loader {background: url('http://www.calgaryramsrugby.com/images/ajax-loader.gif');background-repeat:no-repeat; width: 250px; height: 250px; margin:auto;}
#block {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
The js:
$(document).ready(function() {
$('#block').fadeIn();
$('#iframecontainer').fadeIn();
$('#iframecontainer iframe').attr('src', 'http://www.popsurvey.com/s/5gzmqc/0x5513');
$('#iframecontainer iframe').load(function() {
$('#loader').fadeOut(function() {
$('iframe').fadeIn();
});
});
});
Related
I searched for hours trying to find a solution for creating a body background image clickable.
I managed to find some similar questions/answers here on stackoverflow but I don't know how to apply them.
So far I think that the code below might help but I cannot seem to understand how to use it on my website.
$('body').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
Can someone please explain how can I have this working on 007soccerpicks.com? I need the body background image clickable except for the <div id="container"> which is the content area of the website.
Thank you very much!
The script you have setup will click the entire document if wrapped inside the body element. One way to get around this is to use a fixed element in the background with the body logic in another wrapper.
<body>
<div class="body-clickable"></div>
<div class="main-content">
</div>
</body>
<style>
.body-clickable
{
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-image: url('image.png');
}
.main-content {
margin: 0 auto;
width: 1000px;
top: 0;
left: 0;
position: relative;
z-index: 2;
}
</style>
<script>
$('.body-clickable').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
</script>
You could also avoid using a script and actually just make the 'body-clickable' a link.
#box-link {
position: absolute;
top: 8px;
left: 20px;
width: 83px;
height: 83px;
background-color: transparent;
border: 1px solid yellow; }
.box1 {
position: relative;
margin: 20px 0 20px 40px;
padding: 5px 0; width: 300px;
height: 300px;
background-image: url('https://lh3.googleusercontent.com/-Y8Qx-xfqufE/VOIccUtbhpI/AAAAAAAABDI/x5lTXX_Zlrs/s2048/cool-and-stylish-girls-wallpapers-for-fb-cool-and-stylish-girls-with-guitar-6413-sadredheartlovequotesforfacebooktimelinecoverx.jpg');
background-repeat: no-repeat;
}
<body>
<div class="box1">
<a id="box-link" href="https://www.facebook.com/"></a>
<p>The background of this box is an image.</p>
</div>
</body>
I am trying to display divs with some information after a client clicks on a small dot-like div (7x7px black background) pointing to a place on a map. It works but the distance between the dot-like div and the information div is different in every dot-information couple.
Here is the HTML/JS script. Please, don't mind that all the JavaScript and CSS are in the same file, it is done for the sake of simplicity and will be changed lately.
<html>
<head>
<meta charset="utf8" />
</head>
<body>
<div id="pointer_div"
onclick="getClickPosition(event)"
style="position:absolute; top:1px; left:1px; border: 1px solid black;
background-repeat: no-repeat; width: 1146px; height: 714px;" >
<div id="sofia"
onclick="showForecast('Sofia_381_178')"
style="position:relative; top: 381px; left: 178px;
background:black; width: 7px; height: 7px;" ></div>
<div id="plovdiv"
onclick="showForecast('Plovdiv_512_435')"
style="position:relative; top: 512px; left: 435px;
background:black; width: 7px; height: 7px;" ></div>
<div id="ruse"
onclick="showForecast('Ruse_77_662')"
style="position:relative; top: 77px; left: 662px;
background:black; width: 7px; height: 7px;" ></div>
<div id="result_data"
style="visibility:hidden; width:300px; height:100px;
border: 1px solid black; background:white;"/></div>
</div>
<script language="JavaScript">
function showForecast (strr) {
var splits = strr.split('_');
var xcoord = splits[2];
var ycoord = splits[1];
if (xcoord>810) xcoord= xcoord-300;
if (ycoord>610) ycoord= ycoord-100;
var resultDiv= document.getElementById("result_data");
resultDiv.style.visibility="visible";
resultDiv.style.position = "relative";
resultDiv.style.left = xcoord;
resultDiv.style.top = ycoord;
resultDiv.innerHTML = 'Forecast for: ' + splits[0];
};
</script>
</body>
</html>
So, when I click on div "plovdiv", info div appears some 30px below the dot-div, but when I click "ruse" the info div shows right below the dot. I checked both in Firefox and SeaMonkey browsers and they behave identically.
I tried to put the script in jsfiddle but it was showing all the info divs at the top left of the page and I couldn't fix that. Here it is anyway, if anyone is interested jsfiddle.
The coordinates for the info divs are passed to the JS function in a string, and they are the same as those of the dot divs (one of the reasons I kept the css in the html file). I hope someone with better understanding of JS will be able to explain that.
It's because you are using position:relative on your divs, which moves them from the position they would be in by default. So (because divs are a block element) ruse would be under plovdiv which would be under sofia, then they are moved by the top and left values. Make them all position: absolute and they'll behave uniformly.
Here's your code working in jsfiddle(I added px units to your js): https://jsfiddle.net/wkz6dj04/5/
#sofia {
position: absolute;
top: 381px;
left: 178px;
background: black;
width: 7px;
height: 7px;
}
#plovdiv {
position: absolute;
top: 512px;
left: 435px;
background: black;
width: 7px;
height: 7px;
}
#ruse {
position: absolute;
top: 77px;
left: 662px;
background: black;
width: 7px;
height: 7px;
}
Here's the code working with the above modifications: https://jsfiddle.net/wkz6dj04/6/
If you want the gap back in, I suggest using margin-top on your #result_data like in this fiddle: https://jsfiddle.net/wkz6dj04/7/
I am currently in the process of developing an online shop via wordpress. Everything was working fine, now I wanted to give my page a custom border( inverted round corners) and found the css code for it as seen here:
css:
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
html:
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello</h1>
<div class="bottom"> </div>
</div>
</div>
I renamed the classes to get no conflict with the existing css classes of the theme. It is working fine as seen here:my site. The problem is now, that I cannot interact with the site anymore, no links, no hover effects. It seems like the custom css is overlaying the actual site. Do you have any suggestions what I maybe did wrong?
P.S. I edited the header.php so that inverted corner div and the top div are right underneath the page-wrapper div( site content) and in the footer.php I edited the top div and the inverted-corner div closing right above the page-wrapper div closing.
Add :
pointer-events: none;
to the .bottom-corner CSS, so the mouse passes through.
In your custom.css you have this:
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
This basically overlays the whole page and thus disables any interaction.
One other option I would like to suggest to change following css rule
CSS
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
Replace above code with the below one
.top - corner, .bottom - corner {
position: absolute;
width: 100 % ;
}
this solution will work on all modern browsers and IE8 and above ( I'm not sure about lower version of IE, but it may work on them as well )
I am making a simple php chatbox and am starting with the css/javascript first. What I want to do is when I click the header of the chat, the main part of the chat will slide up and show, and when I click the header again, it will go down, similar to the Facebook chat. I have tried things like
$(".chatheader").on("click", function () {
$(".chatcontainer").style.display = 'visible';
}
but none of them work, here are my codes
HTML
<div id="chatbox">
<div class="chatheader"><div class="chatheadertext">chatboxheader</div></div>
<div class="chatcontainer">
test
</div>
</div>
CSS
#chatbox {
right: 0;
bottom: 0;
position: absolute;
padding-right: 50px;
}
.chatcontainer {
height: 360px;
width: 320px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
float: right;
top: 100%;
display: none;
}
.chatheader {
font-family:'PT Sans';
background: #00b4ff;
width: 322px;
height: 51px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
bottom: 360;
}
.chatheadertext {
padding-top: 15px;
padding-left: 15px;
color: #fff;
}
DEMO
I have display: hidden; on my .chatcontainer and I would like to use javascript to make the display visible when .chatheader is clicked. Thanks in advance to anyone who can help!
You can use .slideToggle():
$(".chatheader").on("click", function () {
$("#chatcontainer").slideToggle();
});
Updated Fiddle
Final code should look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".chatheader").on("click", function () {
$("#chatcontainer").slideToggle();
});
});
</script>
Use the jQuery slideDown() method:
$(".chatcontainer").slideDown();
And use slideUp() to hide it later.
I need some help with this project. I'm trying to get a picture as a background on a div element, that could be expanded and hid when clicked on. I don't know how to make the image a background for the div element, and I don't know how to make the div toggle from left to right.
I really appreciate any help. Thank you.
<html>
<body>
<div id="couch">Info about this couch</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="C:\Users\Jason\Desktop\CSS\HTMLBook/app.js" type="text/javascript" charset="utf-8"></script>
</html>
#couch {
height: 95px;
width: 65px;
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
}
Add this code to your page
<script>
$( "#couch" ).click(function() {
$( "#couch" ).toggle(1000);
});
</script>
test : http://jsfiddle.net/Ss86Q/1/
I have looked through your code and formatted it while also setting up a jfiddle. I hope this works and if not hopefully its a starting point. Please check my JSfiddle.
http://jsfiddle.net/jmcH8
$(document).ready(function(){
$("button").click(function(){
$("#couch").toggle('slow');
});
});
JSBIN DEMO
At first, the CSS
#couch {
height: 95px;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
Now Jquery:
If you want to change the width:
$("#couch").click(function() {
$(this).toggleClass("big");
});
Add this to your css:
.big {
width: 400px !important;
}
If you want to hide the div itself
$("#couch").click(function() {
$(this).toggle();
});
In this example, if you toggle the div is hidden. How you want to restore it back.
I guess you are looking to collapse the div and expand it again.
In that case, change the height of the div based on click.
Hope its useful to you :)
Please try inserting the scripts inside the <head></head> tag
try this
html
<body>
<div id="couch" class="collapseRemoved">Info about this couch</div>
</body>
css
#couch {
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg") 100% 100%;
background-size:100%
}
.collapseRemoved{
width:200px;
height:100px;
}
.collapse{
width:100px;
}
js code
$("#couch").click(function(){
if($(this).hasClass("collapse")){
$(this).removeClass("collapse").addClass("collapseRemoved");
}else{
$(this).removeClass("collapseRemoved").addClass("collapse");
}
});