I have a jquery toggler on the very top of my page that will eventually open up to reveal a form. The problem is that when the panel expands it will push down all the content under it instead of the panel going over the content. How do I make sure the panel expands over the content instead of pushing it down?
I only have the basic slidetoggle function set up:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>this will be a form</p>
</div>
<p class="flip">sign up!</p>
</body>
</html>
You can try something with position:absolute.
Check out this jsfiddle.
As partkyle said, use absolute positioning, and you will probably also want to also use z-index "layering" in your css to specify which element shows on top.
Related
Trying to add a "scroll to top" button to fade in when I scroll down the webpage. Doesn't want to know, I've applied this exactly another webpage and works fine, on this web page, it just doesn't want to know. What am I doing wrong?
The script & style sheets are separate & attached in the head section, they do not make up the document body of the webpage.
Long time,
<!doctype html>
<html>
<head>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="../styles/alternate-styling-sheet.css" rel="stylesheet" type="text/css">
<head>
<body>
<div id="scroll-to-top-button">
Top<i class="fa fa-caret-up" aria-hidden="true"></i>
</div>
</body>
<html/>
/----------------------------------/
<script>
$(window).scroll(function(){
if($(this).scrollTop() > 150){
$('#scroll-to-top-button').slideDown();
}
});
</script>
/---------------------------------------/
<style>
#scroll-to-top-button{
right:20px;
bottom:20px;
display:none;
background-color:#3A83F3;
position:fixed;
border-style:none;
border-radius:5px;
width:100px;
z-index:99999999999;
}
#scroll-to-top-button a{
padding:10px;
display:block;
color:white;
font-size:17px;
text-decoration:none;
}
#scroll-to-top-button a:hover{
background-color:#81AFED;
border-radius:5px;
}
#scroll-to-top-button a i{
padding-left:10px;
float:right;
}
</style>
If the script is part of the js you are calling first, that may be your problem. You have to load jquery first. If you run developer tools, you will probably see in the console that it fails at "$(window)".
First of all move jquery libs to the top of custom scripts
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
And for fade in using js you can follow this links.
It is well explained -
Fade In on Scroll Down, Fade Out on Scroll Up
Since I answered first, I will reply to your comment to the other answer that is similar to mine:
It isn't stupid, as javascript - unless dynamically loaded - loads in the order listed. Since jquery is just a javascript library, it has to load before you can call any jquery functions.
It is possible that your other code had inherited jquery some other way. It would be hard to tell without context.
Load your jQuery library script above your personal script by putting it on the line above it
Try using this:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 150){
$('#scroll-to-top-button').slideDown();
}});
});
</script>
But it does appear that DaniP's fiddle is working correctly: https://jsfiddle.net/by49ph5s/
On my website, I have to build multiple spoilers. I'm planning to use this code for creating spoilers: How to create multiple spoiler buttons.
I'm looking for an easy way to create a link 'x' on a page 'A.html' that leads to the page 'B.html' and opens the spoiler 'x' on the page 'B.html'. So the spoiler name="x" and the URL should look similar to B.html#x.
In other words, I need a table of contents on the page A.html for spoilers on the page B.html.
But if you go straight to the page B.html, all spoilers should be closed by default with an option to open and close them by clicking on the spoiler title.
Any ready-made solutions would be appreciated. The solution shouldn't necessarily be based on the code I provided above.
Ok, I know that it's totally wrong, but this is what I tried.
A.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="x" class="spoiler">Content1</div>
<div id="y" class="spoiler">Content2</div>
<div id="z" class="spoiler">Content3</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
B.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="x" class="spoiler">Content1</div>
<div id="y" class="spoiler">Content2</div>
<div id="z" class="spoiler">Content3</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".spoilerButton").click(function (e) {
e.preventDefault()
var foo=$(this).attr('href')
$(''+foo).slideToggle(1000);
});
});
</script>
</body>
Update: here's the example of what I need: https://support.google.com/plus/#topic=3049663 each section adds a unique URL ending to the link.
If you don´t like to do it over the querying the url, you need to open B.html in a new javascript window.
And there you can do something it, e. g.:
window win = window.open("B.html");
win.document.myVariable = "test";
Then you could read the variable on website B.html as you usually would do with myVariable
Edit: If you just want to load page B.html into a spoiler in page A.html then it´s just a single jquery command:
$("#spoiler").load("B.html");
I found a solution here: https://forum.jquery.com/topic/accordion-open-a-specific-tab-with-link-from-another-page
But I ended up with the accordion, instead of a set of spoilers, as I initially wanted.
i've copied a very basic script from the Jquery Waypoints website,
all i want it to do at the moment, is when #header reaches the top of the viewpoint, an alert would pop up.
i've loaded the scripts in this order
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="waypoints/waypoints.min.js"></script>
<script language="javascript" type="text/javascript" src="jscript.min.js"> </script>
And this is the element that i want to have the waypoint (#header)
<div id="header">
<h1>Header</h1>
</div>
This is the CSS for #header, which is probably not needed for this question
#header {
height:75px;
width:auto;
position:absolute;
background:#212121;
top:50px;
left:200px;
right:100px;
}
And then the very simple jQuery script, which is the same script (with a different element name) from the site http://imakewebthings.com/jquery-waypoints/
$('#header').waypoint(function() {
alert('Top of header hit top of viewport.');
});
When i check it on chrome, and scroll past the header, no alert comes up, and no errors are shown in the console.
Please help me to understand my mistakes here,
Thanks.
I've managed to get it to work by adding a document ready function
so the script would now look like this:
$(document).ready(function() {
$('#header').waypoint(function() {
alert('Top of header hit top of viewport.');
});
});
I have this little bit of code for a fade in effect but for some reason firefox is not picking up the which I need because the fade it doesn't work for firefox. What am I missing to get this to work?
<noscript>
</style>
<style type="text/css">
body {display:inherit !important;} /*if they haven't got javascript we need to show the body
</style>
</noscript>
<script type="text/javascript">
$(document).ready(function() { $("body").fadeIn(1500);});
</script>
the css
body {
background-color:#000;
overflow-x:hidden;
-webkit-text-size-adjust:100%;
display:none;}
You can't have a <noscript> tag anywhere but the <body> section of your document, and you can't have a <style> tag anywhere but the <head> section of your document (see this post).
An alternative way to do this would be to make the body tag default to display: visible and set the display property using JavaScript like so:
<body>
<script type="text/javascript">document.body.style.display = "none";</script>
...
</body>
Then get rid of your <noscript> tag completely and remove the display:none; line from your CSS declaration.
The advantage of this is that if the browser doesn't have JavaScript enabled, your <body> tag will be visible, regardless of how the browser handles the <noscript> tag.
I am using jquery-ui to create a dialog window. the div to be shown on the dialog has the class 'dialog'.
Let us look at the html first :
<div class="click_me">
Click Me
</div><!-- end of class click_me-->
<div class="dialog">
this is my dialog
</div>
css and javascript follow:
<style type="text/css">
.click_me{
width:120px;
border:1px solid red;
text-align:center;
}
.dialog{
width:230px;
border:1px solid green;
text-align:center;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".click_me").click(function(){
dialog_my= $(".dialog").clone(false);
dialog_my.dialog();
$(".dialog", dialog_my ).css('width','450px');
}
);
});
</script>
But the line $(".dialog", dialog_my ).css('width','450px'); has no effect. If I omit the context and write the code as $(".dialog" ).css('width','450px'); , then the css is applied both on the flat webpage and on the modal window.
How can I apply the css only on the modal window?
If you only want to give some width to the dialog, you can use this:
dialog_my.dialog({width:450});
You are trying to find a div with class dialog in dialog_my which is your div. Just put :
dialog_my.css('width','450px');
Or even better, with chaining methods:
dialog_my = $(".dialog").clone(false).dialog().css('width','450px');
jQuery UI adds various classes to your DOM elements to make your .dialog()-call work. You can use this to style just the elements that you want.
With css:
.ui-dialog {
width: 450px;
}
Or Javascript:
$('.ui-dialog').width(450);
The Theming tab of the official plugin description shows you more things you can modify.