I have a JavaScript slide-out menu on my page. As the page is loading the menu shows in the wrong place and as opened (it should be closed by default). It then jumps into the correct position and state once the page has loaded.
I would like the menu to either load last or be in the correct position to start with. I have tried making the style for the menu hidden and the display it as a block on page load with JavaScript but the menu just stays hidden.
<link rel="stylesheet" type="text/css" media="all" href="<css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="</css/reset.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: 'images/closed_menu.png', //class of the element that will become your tab
imageHeight: '230px', //height of tab image //Optionally can be set using css
imageWidth: '62px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 600, //speed of animation
action: 'hover', //options: 'click' or 'hover', action to trigger animation
topPos: '270px', //position from the top/ use if tabLocation is left or right
leftPos: '30px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$("div.slide-out-div").mouseover(function(){
$('.handle').css("background-image", "url(images/open_menu.png)");
}).mouseout(function(){
$('.handle').css("background-image", "url(images/closed_menu.png)");
});
$('#sliderimages').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
});
</script>
<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">
and then the CSS
.slide-out-div {
display: none;
padding-left: 0px;
width: 200px;
z-index: 3;
position: relative;
}
A possible solution might be this. In the <head> of your html add:
<script>document.documentElement.className += ' js'</script>
This will add a "js" class onto the <html> element.
Next, in your css file style your menu as you would normally, but immediately after, hide it by adding the .js class. For example:
.menu { /* your normal styling goes here */ }
.js .menu { display: none; }
This makes sure that your menu is shown in clients that do, for whatever reason, not support JavaScript but hidden in clients that do support JavaScript.
Next up, adapt your JavaScript file to show the slide-out menu when needed.
Looked at this with fresh eyes this morning and just realised I was using trying to use a Class in my Javascript and not an ID.
I changed from this
<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">
to this
<body onload="javascript:document.getElementById('menu').style.display = 'block';">
Related
I am currently creating my webpage using HTML/CSS with the addition of Javascript slick slider. I am currently using the regular slider code for my gallery tab, however, my previous arrow button (.slick-prev:before) is submerged behind my div class "slider_1", with my .slick-next:before arrow working how it should be comfortably sitting outside of the div.
I have added margin and padding to .slick-prev:before however it only pushes the arrow further out of sight within the div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link href="styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.slick-slide
{
margin: 0px 0px 0px 60px;
}
.slick-prev:before,
.slick-next:before
{
color: black;
}
</style>
</head>`
`<div class="slider_1">
<div><img src="twitter.png" width="400px" height="400px">Photo1</div>
<div><img src="twitter.png" width="400px" height="400px">Photo2</div>
<div><img src="twitter.png" width="400px" height="400px">Photo3</div>
<div><img src="twitter.png" width="400px" height="400px">Photo4</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider_1').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
I would like to be able to have my previous arrow outside of the slider div to become operable. as currently the arrow simply sits behind my images inside the slider not serving any purpose.
Understanding:
Having read your question, I feel your experiencing layer problems, in that your next and previous buttons are hidden behind other web elements.
Solution:
We can write some CSS that tells it to alter the layer position to a higher layering number, to do this we use CSS using the Z-Index property and assign a high number such as 99 to ensure it sits above all other elements on the webpage.
To use z-index we must specify a position property with the value of fixed, absolute or relative.
In my example, I have used the relative value, so that it doesn't tamper with where the arrows were originally positioned.
Code to try:
.slick-prev, .slick-next{
position: relative;
z-index:99 !important;
}
However, if you find that the code only affects 1 of your sliders, then you might want to add an ID to the sliders HTML and write your CSS as follows:
#slider_1.slick-prev, #slider_1.slick-next{
position: relative;
z-index:99 !important;
}
Then alter the affected slider's HTML to have the ID in it also
<div class="slider1" id="slider1">
looking for advice from How to position 400 x 400px popup div relative to click, keeping in screen view
I am loading a jquery pop up div. trouble being it is displaying in the middle of the screen I cant get it top display at the top of the screen...
<script>
$(function () {
$("#saveDialogSingleFeature").dialog();
});
</script>
<div style="display: none;">
<div id="saveDialogSingleFeature" title="Save Complete">
<p>
You have successfully saved 1 feature.</p>
</div>
</div>
As I said div opens fine I just need to change the position it is displayed at. I have tried:
<script type="text/javascript">
$('#saveDialogSingleFeature').css({ 'top': 10, 'left': 10 });
</script>
and adding a class .saveFeaturePopUp to the div...
<style type="text/css">
.saveFeaturePopUp
{
position: {my: "top", at: "bottom", of: $("header")};
}
</style>
but to no avail. please advise
You should just need to set Position:absolute in your css.
<script type="text/javascript">
$('#saveDialogSingleFeature').css({position: 'absolute', 'top': 10, 'left': 10 });
</script>
I got a problem with sections. The text inside of section, overflows it. I don't understand this because, normally, when you disable autoScrolling, data is wrapped by the section. I downloaded fullpage demo and filled it with loads of text. Section wraps the text.
My code is:
Html:
<div class="jumbotron about-section section" id="section1">
<p>lorem ipsum ...
</p>
</div>
Css:
.about-section{
background: url(../img/text_bg_sm.png);
background-size: cover;
background-repeat: no-repeat;
font-family: ProximaNovaLight;
font-size: 20px;
padding-top: 90px;
}
.about-section p span{
font-family: ProximaNovaRegular;
}
JS:
<script src="js/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function(){
if( $(window).width() > 900 ){
$('#fullpage').fullpage({
autoScrolling: true,
menu: "#menu",
css3: true,
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
responsive: 900,
resize: false
});
} else {
$('#fullpage').fullpage({
autoScrolling: false,
menu: "#menu",
css3: true,
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
responsive: 900,
verticalCentered: true,
resize: false
});
}
});
</script>
Tried to turn off jumbotron, bootstrap at all, leave only section class.
Result remains the same.
This is what i mean :
My case:
At this picture you can see how text flows out from section with dark background to section with white background.
How creator of fullpage.js plugin do this :
I created 20 "Keep it simple" signs and the final section stretched to it's content height. (Responsive demo)
I downloaded fullpage demo and filled it with loads of text. Section wraps the text. My code is:
In the demo page it happens exactly the same as you mention. The sections still having the fixed height and the overflowing text is being hid.
As fullPage.js sets the size of the sections on an inline style, you can overwrite it as far as you use the property !important of CSS.
.section{
height: auto !important;
}
Living demo
I am new to Javacript (very, very new) and I need to place a loading spinner on a site. We currently have a screensaver and once you tap the screen it takes a awhile to get to the necessary url. So, we wanted to place a spinner to make sure users would not continue to tap the screen.
I am using spin.js abd I am pretty sure I am doing something wrong as it is not showing up when I do a test.
Here is the code I am using:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>THE TITLE</title>
<style type="text/css">
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width: 1024px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
}
a,img,map,area {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
<script type="text/javascript" src="spin.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
</script>
</script>
</head>
<body onLoad="timeout(7,goto,'screen3.html');">
<img src="screen2.jpg" width="1024" height="768" border="0">
<div id="spinner">
</div>
</body>
</html>
Any advice will be appreciated.
A few things are wrong with your code:
you have 2 closing <script/> tags after eachother (right before ), so that's a syntax error.
you have another syntax error. You're not closing jqueries document.ready function properly.
You're using a jQuery method but you're not including the jQuery library in your code.
You say color:'#000' in the spinner options, which means the spinner will be black (same as your background color so you will never see it).
The spinner works in its most simple form. See working example:
http://jsfiddle.net/wLkganhm/
If you're very new to javascript I suggest reading up on how to use the debugger so you can find the syntax errors for yourself :)
You have a few issues with your code as already pointed out.
I've put up a cleaned up version here http://jsbin.com/payuzeyopa.
Things to improve on/fix:
Try using a site like JSFiddle or JSBin to share/prototype your code with others
Keep your HTML, CSS and JavaScript files separate
Spot errors early by using tools built into the browser. For example, see http://discover-devtools.codeschool.com/ for an excellent starter.
Finally, read up on JavaScript and HTML :)
Good luck!
I am trying to implement smooth div scroll, the "Clickable Logo Parade" in particular: http://www.smoothdivscroll.com/clickableLogoParade.html
And I got it working in a blank page perfectly exactly the way I want it to, but when I insert it in my current layout it doesnt work properly.. I am assuming something is interfering with it?
Any help?
This is what I added into my css:
#logoParade
{
width: 628px;
height: 75px;
position: relative;
}
#logoParade div.scrollableArea a
{
display: block;
float: left;
padding-left: 10px;
}
This is the jQuery I have added:
<script type="text/javascript">
$(document).ready(function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
</script>
And these documents im including:
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<!-- Latest version (3.0.6) of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- jQuery Kinectic (1.5) used for touch scrolling -->
<script src="js/jquery.kinetic.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.3 minified-->
<script src="js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
As well as of course actual jquery..
I uploaded me trying to implement it here you can have a look:
http://www.mintystudios.co.uk/clients/naghmeh/
And here is working version in a blank page..:
http://www.mintystudios.co.uk/clients/naghmeh/1/
Anyone know why it isnt working in the implemented version?
This should solve your problem; replace it with your script.
<SCRIPT type="text/javascript">
jQuery(function ($) {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
</SCRIPT>