I am using this Tutorial to show a Popup Modal Window on page load, For some reason it is not showing the contents & image inside the Modal.
Code i am working on is at jsFiddle
I want a simple Modal popup on which i can show Message which are in form of image in different dimension, I want Modal to show in the middle of the page and adjust width & height as per the image. I would appreciate help in this regard.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});
</script>
<style>
/* Z-index of #mask must lower than #boxes .window */
#mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
display:none;
z-index:9999;
padding:20px;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
}
</style>
</head>
<body>
<div id="boxes">
<!-- #customize your modal window here -->
<div id="dialog" class="window">
<b>Testing of Modal Window</b> |
<!-- close button is defined as close class -->
Close it
<br />
<img src="http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg" />
</div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
</div>
</body>
</html>
The error is this line op
var id = $(this).attr('href');
On document.ready you dont have a href attribute, but if you replace it to
var id = "#dialog";
Youre modal will work. See: http://jsfiddle.net/HJUZm/3/
More...
For the tutorial you are reading, I can see 2 possible mistakes.
First is that in your HTML you are missing
<!-- #dialog is the id of a DIV defined in the code below -->
Simple Modal Window
And for some reason you have forgotten to use $('a[name=modal]').click(function(e) { and instead just have inserted it in document.ready
The differences between $('a[name=modal]') is that document.ready is fired once when page is ready, and $('a[name=modal]').click(function(e){...}); is fired on every click where a name attribute is modal
Related
I am working on my responsive menu that will be on desktop view a normal horizontal menu, but when the screen is smaller than 992px a hamburger style button will appear which will toggle a push-in side menu.
The problem i am facing is that the menu glitches when resizing the window aka switching between desktop and mobile view.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
my css:
#media screen and (min-width: 992px) {
}
and my js:
$(document).ready(function(){
$('#mobile-icon').click(function(){
$(this).toggleClass('closed');
});
$('.expander-icon').click(function(){
$(this).parent().toggleClass('active-menu');
});
});
$(window).on('load resize', function () {
var screenWidth = $( window ).width();
if(screenWidth < 992){
$('.u').addClass('isMobile');
$('#icon').click(function(){
$(this).toggleClass("open closed");
if($( "#con" ).hasClass( "open" )){
$('.gation').css('margin-left',"0");
}
else{
$('.asdn').css('margin-left',"-70%");
}
});
}
});
Simplify your JS, move everything you can to CSS. Instead of modifying margin left in JS do it in CSS, and whenever you toggle class open on mr-mobile-icon, toggle it also on mr-navigation. Your $(window).on('load resize', ... ); is unnecessary. Just remove it, let CSS do everything for you.
CSS:
#media screen and (max-width: 991px) {
.mr-navigation {
// style
margin-left: -70%;
}
.mr-navigation.opened {
margin-left: 0;
}
}
JS:
$('#mr-mobile-icon').click(function(){
$(this).toggleClass('open');
$('.mr-navigation').toggleClass('open');
});
I don't know if I fully understand what you're trying to do here but the first issue I see is that you're adding a click event to mr-mobile-icon constantly while while the window is resized. These click events don't erase existing click events, they stack. After the window has resized, you might have hundreds of click events on mr-mobile-icon, all telling the browser to change css attributes.
You'll want to remove the click event assignment from the window resize and load event and just use the one you've already got in the document.ready. If you scope the screenWidth variable to be globally-accessible, you can use it inside your click function.
Here's a basic example of what I'm suggesting, with your other code removed:
var screenWidth = $( window ).width();
$(document).ready(function(){
$('#mr-mobile-icon').click(function(){
if(screenWidth < 992) {
// do whatever needs to happen for mobile
} else {
// do whatever needs to happen for desktop
}
});
});
$(window).on('resize', function () {
screenWidth = $( window ).width();
});
I use one page website and when I click menu button about it scrolls down to the top of some div... But Because I am using fixed header scrolling goes to 0px top and I need like 100px top like padding in body tag but I need to say in function I need to scroll to the top of item after 100px from top of the page.
Here is my code:
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
var x = $(this.hash).offset().top;
$('html,body').animate({scrollTop:x},2000);
});
});
Just adding 100px to $(this.hash).offset().top will do it if I understand you correctly.
Since, offset is getting data relative to the document.
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document. http://api.jquery.com/offset/
Example:
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
var x = $(this).offset().top;
$('html,body').animate({scrollTop: x - 100 }, 2000);
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="height: 1000px; padding-top: 100px">
<div class="scroll">click to scroll to me</div>
</body>
</html>
I want to start page at the center horizontally and vertically when it had loaded (not at top), anyone any suggestions? Or at a specific height if that is possible. Thank you!
You can Do it like this:
$(document).ready(function() {
$(window).scrollTop($(window).height()/2);
$(window).scrollLeft($(window).width()/2);
});
You can change the position to what suit your needs.
Also you can use $(window).scrollTo($(window).width()/2, $(window).height()/2);
not sure what you are asking but have you tried relative coordinates ?
like >>
/*i put this all css selector for canceling all margins, paddings so i can remove default browser prefereces for the same*/
/*border box is just that any size od div is not changed after addinational padding*/
*{margin:0;padding:0;box-sizing:border-box;}
body{
position:absolute;
width:100%;height:100%;
background-color:red;
padding-top:10%;
padding-left:10%;
padding-right:10%;
padding-bottom:10%;
}
centerd{
/*relative dimensions wont work if not display:block;*/
display:block;
width:100%;height:100%;
background-color:blue;
}
<!doctype html>
<html>
<meta charset = "UTF-8" />
<title>Center Content</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<centerd>
<!--html5 element, you can create your own -->
</centerd>
</body>
</html>
for more information visit : it is cool way to know enough about html, css, javascript etc.
Although not sure if this is what you are looking for:
To center a container (a DIV element say) horizontally, give it a fixed width and auto left and right margins in CSS:
div#container
{ width: 1024px; /* a fixed width container */
border: thin solid green; /* debug, to see */
margin-left: auto;
margin-right: auto;
}
then an anonymous JavaScript function to center a container vertically after load using its margin-top property:
function ()
{ var e = document.getElementById("container");
var eHeight = e.offsetHeight;
var clientHeight = document.documentElement.clientHeight;
var marginTop = 0;
if(clientHeight > eHeight)
{ marginTop = (clientHeight - eHeight) >> 1; // integer divide by 2
}
e.style.marginTop = marginTop + "px";
}
added to the page using jQuery's ready() function for the window, and HTML
<div id="container">
hello this is page content
</div>
centers a container element in the viewport where possible
Old question but I just use:
function Scrolldown() {
window.scroll(250, 400);
}
window.onload = Scrolldown;
How to Change a div width when size of browser window change with javascript (no jQuery)?
I want to perform this job dynamically when user resize his browser.
Please help, Immediately ...
any suggestion for this job with css?
Use percentage. for example width="50%" This will change the width when browser size change.
You can either set this with CSS or Javscript
CSS would be easily done using %'s ie
div {
width: 95%;
}
JS would be easily done using
var element = document.getElementById("x");
window.addEventListener('resize', function(event) {
element.style.width = window.style.width;
});
This code should work in all browsers. But you really should use CSS instead.
<!DOCTYPE html >
<html>
<head>
<meta charset="utf8" />
<title>untitled</title>
</head>
<body>
<div id="myDiv" style=" height: 200px; margin:10px auto; background: green;"></div>
<script type="text/javascript">
var myElement = document.getElementById('myDiv');
function detectWidth(){
var myWidth = 0;
if(typeof (window.innerWidth)== 'number'){
myWidth = window.innerWidth;
}
else {
myWidth = document.documentElement.clientWidth; //IE7
}
myElement.style.width=myWidth-300+'px';
}
window.onload=function(){
detectWidth();
};
window.onresize = function (){
detectWidth();
};
</script>
</body>
</html>
When you scroll, are you changing the position of something?
How can I change the position of the scroll? Specifically to match the cursors movement.
What I want to do is scroll the window when I click and drag with the cursor inside the window.
For example:
I have a 400px by 400px div with a 900px by 900px div inside of it. I want to scroll around by click and dragging. Note, I do NOT want to move the position of the inside div (easily doable with jQuery UI via draggable), just the scroll position. Moving the actual div position messes with my other javascript applications.
Any help would be appreciated! Thanks!
This should get you going with horizontal scrolling. Vertical would be similar, but with scrollTop().
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var lastPageX;
$(document).ready(function() {
$("#inner").mousedown(function(e) {
// Reference to the drag pad
var inner = $(this);
// Position where mouse was pressed
lastPageX = e.pageX;
// Attach mouse move listener
$(inner).mousemove(function(e) {
var diff = lastPageX - e.pageX;
// Scroll based on the new curson position
$("#outer").scrollLeft($("#outer").scrollLeft() + diff);
lastPageX = e.pageX;
});
// Remove mouse move listener
$(window).mouseup(function() {
$(inner).unbind("mousemove");
});
return false;
});
});
</script>
<style>
#outer {
height: 400px;
width: 400px;
background-color: Lime;
overflow: scroll;
}
#inner {
height: 900px;
width: 900px;
background-color: Yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>
Edit: Return false after the mousedown is handled to prevent firefox from grabbing the div.