Jquery- Full screen popup overlay on href click - javascript

Hi I want to show Full Screen Overlay Popup on clicking href tag. I tried a lot but couldn't find a particular solution. So far I am able to show/hide popup but i am failed to show full screen popup. So far working fiddle and necessary code is mentioned below.
$(document).ready(function(){
$('.opop').click(function(){
$('.pops').fadeIn();
});
$('.cls-pop').click(function(){
$('.pops').fadeOut();
});
});
.pops{
display:none;
height: 100%;
width: 100%;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<ul>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
</ul>
Open Popup
<div class="pops">
Some Content
<ul>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
</ul>
<p> Some More Content </p>
Close Popup
</div>
</div>
Fiddle: http://jsfiddle.net/hTQb8/128/
Thanks in advance...

#Ashish working fiddle :
http://jsfiddle.net/hTQb8/134/
html
<div class="items">
<ul>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
</ul>
Open Popup
</div>
<div class="pops">
Some Content
<ul>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
</ul>
<p> Some More Content </p>
Close Popup
</div>
css
.pops{
display:none;
height: 100%;
width: 100%;
background-color: gray;
position : absolute;
z-index:1;
top:0;
}
jquery
$(document).ready(function(){
$('.opop').click(function(){
$('.pops').fadeIn();
});
$('.cls-pop').click(function(){
$('.pops').fadeOut();
});
});

try this ashish
.pops{
display:none;
height: 100%;
width: 100%;
background: #fff;
position:absolute;
z-index:1;
top:0;
}

.pops{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: #fff;
}

its better to move your popup html out of container and inside body.
HTML
<div class="items">...</div>
<div class="pops">....</div>
and some changing in your css code to make it cover window with CSS main properties.
CSS (Key properties to achieve with any kind of html):
position:absolute;
top:0;
bottom:0;
z-index:999;
have a look at fiddle

Easy and best way to implement modal box without using any external file..
$(document).ready(function(){
$('#link').on('click', function () {
$('#modal-overlay, #overlay-wrapper').fadeIn(500);
});
$('#close').on('click', function () {
$('#modal-overlay, #overlay-wrapper').fadeOut(500);
});
})
html, body {
width : 100%;
height : 100%;
}
#modal-overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay-wrapper {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link" href="#">click me</a>
<div id="modal-overlay"></div>
<div id="overlay-wrapper">
<a id="close" href="#">Close</a>
<span>modal box value</span></div>
alue

Related

Click outside toggle menu and close menu

I have this menu for desktop and mobile and it works fine so far .., I just don't know how to close the menu again, when a user click on a link or outside the menu, not only on the button. Maybe someone could help me? Thank you!
This is the html
<div id="wrapper1" class="menuDisplayed">
<!-- Sidebar -->
<div id="sidebar-wrapper1">
<ul class="sidebar-nav1">
Texts
<li>Link1</li>
<li>link2</li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="">
<div class="">
<div class="">
︎
this is the css code
/* Sidebar */
#sidebar-wrapper1{
z-index:1;
position: absolute;
padding-right: 0;
margin-top:15rem;
margin-right: -200px;
width:0;
right: 200px;
height:60rem;
overflow-y:hidden;
background: white;
opacity:0.8;
transition:all .5s;
display:flex;
align-items:left;
}
#sidebar-wrapper1{
Display:none;
/* Main Content */
#page-content-wrapper{
width: 100%;
position: absolute;
margin-top:12rem;
padding:15px;
transition:all .5s;
right: 7px;
}
#menu-toggle{
transition:all .3s;
font-family:"Nitti", monospaced;
font-size:1.5rem;
float: right;
}
/* Change the width of the sidebar to display it*/
#wrapper1.menuDisplayed #sidebar-wrapper1{
width:200px;
}
#wrapper1.menuDisplayed #page-content-wrapper{
padding-right:200px;
}
and the script. It worked nice so far!
$(document).ready(function(){
$("#menu-toggle").click(function(e){
e.preventDefault();
$("#wrapper1").toggleClass("menuDisplayed");
});
});
You can do something like this:
$(document).click((e) => {
if (!$(e.traget).closest('#wrapper1, #menu-toggle').length) {
$("#wrapper1").removeClass("menuDisplayed");
}
});
What this does is to add a click event listener to the document and every time something is clicked, check if that clicked element is the menu itself or a descendent of the menu, if that is not the case, close the menu.

Changing Menu Image

I need to change the background-image for a menu button once it is clicked but CSS :active property doesn't work for it, only for while it is being clicked, I need for it to stay as the image until they click it again.
HTML
<nav class="clearfix">
<div class="menu">
<ul style="list-style-type:none;">
<li>
Home
</li>
<li>
About
</li>
<li>
Before/After
</li>
<li>
Facilities
</li>
<li>
Contact
</li>
<li>
Staff
</li>
</ul>
</div>
<div class="site-wrapper">
<div class="header">
<a><div class="menu-trigger" title="Menu"></div></a>
</div>
</div>
<script src="testing.js" type="text/javascript">
</script>
</nav>
CSS
.menu-trigger {
background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/usb-icon.png");
background-position:center;
background-size:100% 100%;
background-repeat: no-repeat;
width:50px;
height:50px;
left: -150%;
transform:rotate(-135deg);
position:relative;
}
.menu-trigger:hover{
cursor: pointer;
}
JS
$('a .menu-trigger').on('click', function() {
$('.menu').toggleClass('open', 300, 'easeOutQuad');
});
change button background image on click using jquery-
check Snippet
$(document).ready(function() {
$(".menu-trigger").click(function() {
$(".menu-trigger").toggleClass("open")
})
})
.menu-trigger {
background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/usb-icon.png");
background-position:center;
background-size:100% 100%;
background-repeat: no-repeat;
width:50px;
height:50px;
left:0%;
transform:rotate(-135deg);
position:relative;
cursor:pointer
}
.open{
background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/help-desk-icon.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="site-wrapper">
<div class="header">
<a><div class="menu-trigger" title="Menu"></div></a>
</div>
</div>
Why not set the background image for each in a class, then just toggle?
.pre_click {
background-image:url(".../image_1.png");
}
.post_click {
background-image:url(".../image_2.png");
}
Then toggle
$('.menu').on('click', function() {
$('.menu').toggleClass('pre_click post_click')
})
Make sure you set the default class that you want applied to the 'menu' item so it will properly toggle.

Set up a HTML page with left and right panel [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
how can I set up a HTML Page with two content sides? Without <frames> !
In example:
On the left side should be the menu for the navigation.
On the right side should be the content of the page.
Example menu:
<div id="page">
<div id="menuleftcontent">
<ul id="menu">
<li> first</li>
<li>second</li>
</ul>
</div>
<div id="maincontent">
<div id="firstcontent">first</div>
<div id="secondcontent">second</div>
</div>
</div>
The menu on the left side should be a fix content and the right content should be changeable.
I have made a sketch:
Thanks in advance
Re-arrange the code so that (i) main content appears before sidebar in HTML source order (ii) add a clearing div (iii) change the href attribute of menu links:
<div id="page">
<div id="maincontent">
<div id="firstcontent">firstcontent</div>
<div id="secondcontent">secondcontent</div>
</div>
<div id="menuleftcontent">
<ul id="menu">
<li>first</li>
<li>second</li>
</ul>
</div>
<div id="clearingdiv"></div>
</div>
Then use the following CSS:
#page {
margin-left: 200px;
}
#maincontent {
float: right;
width: 100%;
background-color: #F0F0F0;
}
#menuleftcontent{
float: left;
width: 200px;
margin-left: -200px;
background-color: #CCCCCC;
}
#clearingdiv {
clear: both;
}
For the obscure part of your question, you need to use JavaScript to show/hide divs. While it is possible to use vanilla JavaScript, the jQuery library makes it much easier:
$(function () {
$("#maincontent > div:gt(0)").hide();
$("#menu a").on("click", function (e) {
var href = $(this).attr("href");
$("#maincontent > " + href).show();
$("#maincontent > :not(" + href + ")").hide();
});
});
Demo here
just apply some css to your html like this :
#page{
width: 1280px;
display: inline;
}
#menuleftcontent{
float: left;
width: 420px;
}
#maincontent{
float: left;
width: 960px;
}
width are some example ;)
Here is a sample of how you can implement splitting your contents. Although, there are many ways to do this actually :)
JS Fiddle
#page {
width: 100%;
}
#menuleftcontent {
float: left;
width: 25%;
}
#maincontent {
float: left;
width: 75%;
}
you can use below css for your html to display it in left and right frame structure
#menuleftcontent
{
width: 30%;
float: left;
}
#maincontent
{
width: 70%;
float: left;
}
#page
{
width : 100%;
clear : both;
}
If you are asking about how to split page vertically without frames. There is an answer for you https://stackoverflow.com/a/11662564/841037
If you are finding a solution to make every page have the fixed content on the left. Then you may seek for something called page template or master page in your backend web framework.
The best you can do is make 2 divs. One with float: left, give that a fixed width, and then create another with a margin-left with the same width as your menu.
CSS:
#leftie {
width: 200px;
background: red;
float: left;
}
#rightie {
margin-left: 200px;
background: green;
}
HTML:
<div id="leftie">
This is your menu
</div>
<div id="rightie">
This is your main content
</div>
Working example:
http://fiddle.jshell.net/xynw4/show/
Fiddle URL:
http://jsfiddle.net/xynw4/
here is an exemple of CSS to style your HTML :
<style>
.page{width:100%; min-height:900px;}
.menuleftcontent{min-width:20%;float:left;height:900px;border:dotted 1px red;}
.maincontent{min-width:78%;float:left;height:900px;border:dotted 1px blue;}
</style>
<div id="page" class="page">
<div id="menuleftcontent" class="menuleftcontent">
<ul id="menu">
<li><a href="showfirstcontent" </a>first</li>
<li><a href="showsecondcontent" >second</a></li>
</ul>
</div>
<div id="maincontent" class="maincontent">
<div id="firstcontent" >first</div>
<div id="secondcontent">second</div>
</div>
</div>

How to display text over image

I want to display text over image. Whenever someone hover mouse over the image.
My Div block is:
<div class="MainDIV">
<br><br><br>
<div class="popular_stores" align="center">
<span style="font-size: 12pt;">Browse our list of stores that we have coupons, coupon codes, and promo codes for.
</span>
<br>
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
</li>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
</li>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
</li>
</ul>
</div></div>
And rest of the CSS and JavaScript Function is:
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.drama').mouseover(function(){
alert("dss");
var tt = $(this).parent().find('.toolTip');
tt.html($(this).attr('title'));
tt.show();
});
$('.drama').mouseout(function(){
var tt = $(this).parent().find('.toolTip');
tt.hide();
});
</script>
<style type="text/css">
body {
text-align: center;
}
.MainDIV{
padding:0;
width:700px;
display: inline-block;
background-color:white;
}
.MainDIV ul
{
list-style-type: none;
}
.MainDIV ul li {
display: inline-block;
padding : 1em;
}
.MainDIV ul li img
{
padding: .2em ;
border-radius: 10px;
-moz-border-radius: 10px;
background-color: #F5F5E3;
}
ul li div{display:none; background:white; opacity:.5; position:absolute;}
What i am trying to do is shown here.please take a look :click here
Similar to this page i want to display text over the image whenever someone hover mouse on the image. Can someone please help me out...
I build up a fiddle with the simpliest way I could think of.
$('#hover1').mouseover(function(){
$('#hoverDiv1').css('opacity', 1)
});
$('#hover1').mouseout(function(){
$('#hoverDiv1').css('opacity', 0)
});
Please see this Fiddle
Hover effect is not correctly positioned, because "li" needs to be defined.
It is just to show an easy jQuery way.
Best

jQuery animate problem

I am using the animate function in jquery but it is working weird. What is wrong with it?
Here is some code:
here is my html page
<ul class="menu red">
<li class="current">Home</li>
<li>Bio</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div> <!-- End menu -->
</div> <!-- End header -->
<div id="content">
<div id="inner">
<div id="Home">
home</div>
<div id="Bio">bio</div>
<div id="Portfolio">port</div>
<div id="Pricing">pric</div>
<div id="Contact">con</div>
</div>
Here is my style sheet
#content {
overflow:hidden;
width: 900px;
}
div#inner {
width: 4515px;
}
div#inner div {
float:left;
width: 900px;
margin-right: 3px;
}
here is my script
function nexthome() {
$('#inner').animate({marginLeft: '0px'}, 1200);
}
function nextbio() {
$('#inner').animate({marginLeft: '-1806px'}, 1200);
}
function nextport() {
$('#inner').animate({marginLeft: '2709px'}, 1200);
}
function nextpric() {
$('#inner').animate({marginLeft: '3612px'}, 1200);
}
function nextcon() {
$('#inner').animate({marginLeft: '4515px'}, 1200);
}
Changing the marginLeft is probably not the best way to do this... it might work that way, but I think using left would be best.
I changed the css to make #inner have a relative position and changed the code to set up an object containing the left positions. Here is a demo.
HTML
<ul class="menu red">
<li class="current">Home</li>
<li>Bio</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div> <!-- End menu -->
</div> <!-- End header -->
<div id="content">
<div id="inner">
<div id="Home">home</div>
<div id="Bio">bio</div>
<div id="Portfolio">port</div>
<div id="Pricing">price</div>
<div id="Contact">contact</div>
</div>
</div>
Updated CSS:
#content {
overflow:hidden;
width: 900px;
}
div#inner {
position: relative;
top: 0;
left: 0;
width: 5500px;
}
div#inner div {
float:left;
width: 900px;
height: 200px;
border: #000 1px solid;
margin-right: 3px;
}
Updated script
// uses the exact name from the menu
var leftEdge = {
'Home' : 0,
'Bio' : 903,
'Portfolio' : 1806,
'Pricing' : 2712,
'Contact' : 3617
};
$('.menu a').click(function() {
var name = $(this).text(); // grabs the name from the menu
$('#inner').animate({
left: -leftEdge[name] + 'px'
}, 1200);
return false;
});
I actually have a plugin called visualNav that updates the menu (highlights the visible panel) when a block comes into view, you can check it out if you are interested. The second demo shows the menu working on both horizontally and vertically arrange blocks.

Categories

Resources