Hey guys I'm running into some problems with the following code. What I'm trying to do is modify the width of a div via css according to the width of the screen.
<html>
<head>
<script src="../jquery/jquery.js" type="text/javascript"> // Add JQuery Code. </script>
</head>
<body>
<div id="something" style="background-color: black; width: 100px;">hello</div>
<script>
$(document).ready(function() {
if (screen.width = 1024) {
$(#something).css('width':'200px', 'background-color':'blue');
}
elseif (screen.width = 1366) {
$(#something).css('width':'300px', 'background-color':'blue');
}
}
</script>
</body>
You have a few problems.
The width should be checked with range
$(document).ready(function() {
if ($(window).width() >= 1366) {
$('#something').css({ 'width':'300px', 'background-color':'blue' });
} else if ($(window).width() >= 1024) {
$('#something').css({ 'width':'200px', 'background-color':'blue' });
}
});
Edit:
Combined with window.resize, then I think it'll behave exactly what you want.
But you can also consider using css media query to achieve responsive layout.
#media only screen and (min-width:1024px){
.my-style {
background-color: blue;
width: 200px;
}
}
#media only screen and (min-width:1366px){
.my-style {
background-color: blue;
width: 300px;
}
}
Try to use the window's resize event, by the way you are assigning the values inside the if statement,
$(document).ready(function() {
$(window).resize(function(){
var something = $('#something');
if ($(this).width() >= 1366) {
something .css({'width':'200px', 'background-color':'blue'});
}
else if ($(this).width() >= 1024) {
something.css({'width':'300px', 'background-color':'blue'});
}
});
});
Note: your code has lot of syntax errors like passing a undefined var as selector, error with else if etc.. and as well as i received a downvote for that.
Related
I'm currently using sticky.js to fix a div to the top of my screen when I scroll. This works perfectly and I wouldn't want to change it but I would like to apply some css to the div to effect some change when it sticks.
I have tried implementing some JavaScript to the sticky script but it's still not working.
This is what I have now:
HTML
<div class="header"><div class="small_logo"><img src=""></div></div>
JavaScript
$(document).ready(function(){
$(".header").sticky({
topSpacing: 0,
success: function() {
$('.header').addClass("wide");
$('.small_logo').fadeIn("slow");
}
});
});
I'm sure it's just a simple javascript format issue but I just can't seem to find the right syntax.
Further to #Alex's point, the documentation does not describe any success option that you have used in your code.
The correct way would be to use the events that have been described in the documentation on github
I've given an example below.
$(document).ready(function(){
$(".header").sticky({topSpacing: 0});
$('.header').on('sticky-start', function() {
$(".small_logo img").fadeIn("slow");
});
$('.header').on('sticky-end', function() {
$(".small_logo img").fadeOut("slow");
});
});
.header {
background: #EEE;
height: 100px;
}
.small_logo img{
height: 100px;
display: none;
}
.body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>
<div class="header">
<div class="small_logo">
<!-- <a href="/"> -->
<img src="https://i.ytimg.com/vi/YCaGYUIfdy4/maxresdefault.jpg">
<!-- </a> -->
</div>
</div>
<div class="body"></div>
Did you see the brief documentation on GitHub?
According to the section about events you will need to do the following:
$('.header').on('sticky-start', function() { // your code });
You can use this simple example. Or this code:
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
$('.header').css({top: '0px'});
} else {
$('.header').css({top: '-50px'});
}
prevScrollpos = currentScrollPos;
}
</script>
Try this
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
$(window).scroll(function() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
})
.sticky {
position: fixed;
top: 0;
width: 100%
}
apply css to sticky class for effect
I'm hidding the sidebar with a button.
But when the view get's under 991px I want to hide the sidebar to have more space for my site.
How can i do this? If I put the code inside the if it will always be toggling. If the size is bigger than 991px it should show the sidebar again
$('#sidebar-btn').click(function () {
$('#sidebar').toggle('visible');
$('.content-wrapper, .full-page-wrapper').toggleClass('content-wrapper full-page-wrapper');
});
//toggle sidebar when width is too small
var browserWidth = $(window).width();
if(browserWidth <= 991 ) {
}
You can use plain CSS for that (EDIT: if you want to toogle classes you need JS).
if(!($(window).width() <= 911)) {
$('.content-wrapper').toggleClass('content-wrapper');
$('.full-page-wrapper').toggleClass('full-page-wrapper');
}
#media screen and (max-width: 911px) {
#sidebar {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="sidebar" class="content-wrapper full-page-wrapper">AAAAAAAAAA</section>
You could try with css as follow :
#media (min-width:991px) {
//Do your css things
}
Else you can catch resize event
Use jQuery to get the width of the window.
if ($(window).width() < 960) { alert('Less than 960'); } else { alert('More than 960'); }
I have this code:
$(window).scroll(function() {
if ($(this).scrollTop()>275)
{
$('.navbar-left').fadeIn();
}
else
{
$('.navbar-left').fadeOut();
}
});
to show my logo on my navbar when scrolled down. The problem is I want to disable this script when the window size is at 768px. I understand I could use:
if ( $(window).width() > 768) {
//Add your javascript for large screens here
}
else {
//Add your javascript for small screens here
}
However, I do not program javascript so this is very difficult for me to integrate into my existing code. Could someone kindly help?
I have attempted so I do not get MARKED DOWN.
if ( $(window).width() > 768) {
if ($(this).scrollTop()>275)
{
$('.navbar-left').fadeIn();
}
else
{
$('.navbar-left').fadeOut();
}
});
}
Here you go.
(function(){
$(window).scroll(()=>{
if(window.innerWidth <= 768){
if($(window).scrollTop() > 10){ //<- set to number you need
$('.navbar-left').fadeOut();
}
else{
$('.navbar-left').fadeIn();
}
}
});
}())
.wrapper{ height: 100px; } /* you may need this to prevent jankiness */
.navbar-left{
height: 100px;
background-color: #f00;
}
.push {
height: 1000px; /* just to test scrolling with no content */
}
<div class="wrapper">
<div class="navbar-left">navbar left</div>
</div>
<div class="push"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
I want to a div to be hidden it the screen size is bigger than 700px and shown only if the screen size is less than 700 px;
Here is the code i'm trying to implement with using jQuery 3
jQuery(document).ready(function() {
if ((screen.width>701)) {
$(".mobile-section").css('display', 'none'); $(".yourClass").hide();
}elseif ((screen.width<=699)) {
$(".mobile-section").css('display', 'block');
}
});
It's not working --- am I doing anything wrong ??
Makes no sense really to use javscript/JQuery here if that is all you want try with CSS media queries like
.mobile-section {
display: none;
background-color: orange;
}
#media screen and (max-width: 700px) {
.mobile-section {
display: block;
}
}
<div class="mobile-section">
hello mobile section
</div>
Check out this fildde and resize the viewable area
width() is a function supported by jQuery providing the width property of e.g. document or window elements. In your case it refers to the document.
http://api.jquery.com/width/
An explanation of the difference between jQuery's .width() and screen.width would be good - screen.width is a native DOM property and it returns the width of the whole screen, e.g. if you have a monitor with 1920x1200 resolution, screen.width will return 1920.
$(document).ready(function() {
if (($(this).width() > 701)) {
$(".mobile-section").css('display', 'none');
$(".yourClass").hide();
}
else {
$(".mobile-section").css('display', 'block');
}
});
Use media queries, no JavaScript required.
#media only screen and (min-width: 700px) {
#hideMe{
display:none;
}
}
<div id="hideMe">This should only be displayed on smaller than 700px screens</div>
You can read about media queries here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Try this,
// Returns width of browser viewport
$( window ).width();
// Returns width of HTML document
$( document ).width();
$(document).ready(function() {
if ($(window).width() > 701) {
$(".mobile-section").css('display', 'none');
} else if ($(window).width() <= 700) {
$(".mobile-section").css('display', 'block');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width : 100px; height:100px;border:solid 1px red;" class="mobile-section">
</div>
Hope this helps.
can someone please help me make a floating menu in prototypeJS? I found documentation to do it in jQuery, like here: net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/ and here: manos.malihu.gr/jquery-floating-menu, but can't figure out where to start for prototypeJS.
So I got it work, sorta. I found documentation here. Here's my code:
<html>
<head>
<title>Prototype examples</title>
<script src="lib/prototype/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window,'scroll', function(evt){
$('movable').setStyle({ top: 8 + document.viewport.getScrollOffsets().top + 'px' });
});
</script>
<style type="text/css">
#container {
background:#000;
padding:100px 10px 10px;
}
#movable {
position: absolute;
float:left;
width:18.5%;
height: 300px;
background-color: red;
}
#firstDiv {
background:#ccc;
float:right;
height:1200px;
width:80%;
}
.clear-both {clear:both;}
</style>
</head>
<body>
<div id="container">
<div id="movable"> Floating menu</div>
<div id="firstDiv">right</div>
<div class="clear-both"></div>
</div>
</body>
</html>
So now I'm trying to get it so it's not choppy when you scroll, and so the menu doesnt start moving until the scroll has moved down to like 100px vertically or something, so it hooks into place.
Figured it out with some help. Used this tutorial: http://jqueryfordesigners.com/fixed-floating-elements/
But changed it up to use Prototype JS syntax. Here's the code:
var topMenu = $('ELEMENT').cumulativeOffset().top;
Event.observe(window,'scroll', function(evt) {
// what the y position of the scroll is
var y = document.viewport.getScrollOffsets().top;
// console.log(y) // console
// check which browser it's using
if (false) { // newer browsers, could be "false"
if (y >= topMenu) {
// if so, ad the fixed class
$('ELEMENT').addClassName('fixed');
} else {
// otherwise remove it
$('ELEMENT').removeClassName('fixed');
}
}
else { // older browsers, iPad, iPhone
if (y >= topMenu) {
$('ELEMENT').setStyle({ top: (0 + document.viewport.getScrollOffsets().top - topMenu) + 'px' });
}
else {
$('ELEMENT').setStyle({ top: 0 + 'px' });
}
}
});
If you want it to not look choppy, you're going to have to use an animation library. If you're using Prototype, then your best bet is to look into Scriptaculous at http://script.aculo.us/
I'd also recommend using Element.cumulativeOffset on DOM load to get the absolute top offset of the menu. Then each time you scroll the menu element, include this initial padding so the menu doesn't just latch on to the top of the viewport.
One more idea too, if you don't particularly want to use an animation library, you could try making the menu position: fixed. You'll still have to keep updating the position for IE though, as it doesn't support fixed positioning ...