replace div id or class on screen size - javascript

I want to replace a div id/class when the screen width is at a certain size. So far this is what i have.
if ( $(window).width() < 750) {
$('#floating-control').attr('id','mobilecontrol');
}
Then i read using class rather than id is better. I change thing around so i have this
if ( $(window).width() < 750) {
$('#floating-control').removeClass('floatcontrol').addClass('mobilecontrol');
}
So far none of this worked. I am open to any other suggestions. (jquery or javascript)

Try using this:
$(window).on('resize', function(){
var win = $(this);
if (win.width() < 750) {
$('#floating-control').addClass('mobilecontrol');
$('#floating-control').removeClass('floatcontrol');
}
else
{
$('#floating-control').removeClass('mobilecontrol');
$('#floating-control').addClass('floatcontrol');
}
});
$(window).on('resize', function() {
var win = $(this);
if (win.width() < 514) {
$('#floating-control').addClass('mobilecontrol');
$('#floating-control').removeClass('floatcontrol');
} else {
$('#floating-control').removeClass('mobilecontrol');
$('#floating-control').addClass('floatcontrol');
}
});
.floatcontrol {
background: white;
color: red;
font-size: 1.4em;
}
.mobilecontrol {
background: blue;
color: white;
font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="floating-control" class="floatcontrol">I am text.</div>

Related

Nav Bar Scroll Function NOT Working

What I need to do to change the colour of my nav bar when I scroll down by a certain amount and reset when I scroll back up. I have tried many different techniques. AKA youtube videos on the subject. But cannot seem to get it to work! I have a 'scrolled' class in my CSS stylesheet with a background color set. But it won't even take my function.
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
});
Google Chrome Dev-Files
//$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
//});
.nav {
max-width: 500px;
height: 1000px;
}
.nav.scrolled {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
</div>
THANKS SO MUCH!
Not sure what the outermost $(function() {... does, but I think that was the reason the snippet inside did not run.
//$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
//});
.nav {
max-width: 500px;
height: 1000px;
}
.nav.scrolled {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
</div>
If you intended to use IIFE, immediately invoked function expression, you can do
(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
}());
which also works.
This describes how to implement this in Vanilla JS, also taking care of performance using passive event listeners.
Codepen Links
let navRef = document.querySelector('nav');
document.addEventListener('scroll', () => {
if (window.scrollY > 500) {
navRef.classList.add('scrolled');
} else {
navRef.classList.remove('scrolled');
}
}, { passive: true })
body {
margin: 0;
}
div.container {
background: aliceblue;
height: 10000px;
}
nav {
height: 50px;
background: pink;
position: fixed;
width: 100vw;
transition: background 0.3s ease-in-out;
}
nav.scrolled {
background: #80deea;
}
<div class="container">
<nav></nav>
</div>

Changing header color when scroll with javascript

I've tried searching for a solution for a while.
So it starts transparent and then as I scroll a certain length it changes to have a background color. The code below is what I have so far
CSS File
header {
padding-top: 10px;
background-color: transparent;
color: white;
position: fixed;
width: 100%;
z-index: 1;
}
.changeColor {
background-color: rgba(30, 32, 35, 0.9);
}
JS in script tags at the bottom of the HTML file
var scroll_distance = 100;
var transparent = true;
document.addEventListener("scroll", function(){
if($(document).scrollTop() > scroll_distance ) {
if(transparent) {
transparent = false;
$('header').removeClass('changeColor');
}
} else {
if( !transparent ) {
transparent = true;
$('header').addClass('changeColor');
}
}
});
window.addEventListener("scroll", function(){
if($(document).scrollTop() > scroll_distance ) {
if(transparent) {
transparent = false;
$('header').removeClass('changeColor');
}
} else {
if( !transparent ) {
transparent = true;
$('header').addClass('changeColor');
}
}
});
HTML file
<header id="headernavbar">
...
</header>
Any tips on how to go about doing this? I tried using JQuery as well but same results. It doesn't add the class at all. I also cleared cookies and cache before visiting the site and tried multiple browsers with no luck. I was also going to add transition effects after I fixed this issue.
You got it opposite. There's no error but the logic error.
By default your background is already trasparent.
You've set on scroll from top, to remove that class when its not even added.
What you need to fix?
When the document_scrolltop > scroll_distance, you add the class, else remove it.
var scroll_distance = 100;
var transparent = true;
document.addEventListener("scroll", function() {
if ($(document).scrollTop() > scroll_distance) {
if (transparent) {
transparent = false;
$('header').addClass('changeColor');
}
} else {
if (!transparent) {
transparent = true;
$('header').removeClass('changeColor');
}
}
});
header {
padding-top: 10px;
background-color: transparent;
color: black;
position: fixed;
border:2px solid;
width: 100%;
z-index: 1;
}
.changeColor {
background-color: rgba(30, 32, 35, 0.9);
transition: all 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="headernavbar">
...
</header>
RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANRANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>DOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>
Perhaps you could simplify the code, you can see it working if you paste it in the console of the developer tools
window.addEventListener('scroll', function(e) {
let headerColor = (window.scrollY) > 100 ? 'red' : 'blue';
console.log(headerColor);
});

If (or maybe hasClass) is being ignored - javascript

You may understand this better by checking the CodePen version.
Going straight to the point, the issue is: when you go to the second or third "slide" (the reddish or bluish colors), and then attempt to resize your window, its interior will become grayish~black. That's not supposed to happen.
The black~gray content must stay within the black~gray "slide", the red in the red one, the blue in the blue one.
I'm making a site which follows this logic, but with images. I made this codepen to simplify since my code is awfully complicated and there's tons of unnecessary code.
I believe the problem is in the if($('body').hasClass('first')){if$(window).resize(function... etc; because the if seems to be ignored since the #glasses div is always gray/black if you resize your window.
Since I'm a beginner in Javascript I don't see anything wrong, in fact I just can't understand why something as simple as a if wouldn't work.
Any help is appreciated. Thanks!
var nums = ['first', 'second', 'third'];
var curr = 0;
$('.next, .prev').on('click', function(e) {
var offset = $(this).hasClass('prev') ? nums.length - 1 : 1;
curr = (curr + offset) % nums.length;
$('body').removeClass();
$('body').addClass(nums[curr]);
if ($('body').hasClass('first')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
event.preventDefault();
} else if ($('body').hasClass('second')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
event.preventDefault();
} else {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#f00");
} else {
$("#glasses").css("background", "#6ff");
}
event.preventDefault();
};
})
if ($('body').hasClass('first')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
})
} else if ($('body').hasClass('second')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
})
} else if ($('body').hasClass('third')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "f00");
} else {
$("#glasses").css("background", "6ff");
}
})
}
.slides-navigation a{
top: 50%;
position: fixed;
}
.prev{
left:30px;
position:absolute;
}
.next{
right: 45px;
position:absolute;
}
#glasses{
width: 50%;
height: 450px;
margin: 0 auto;
background: #000;
background-repeat: no-repeat;
background-position: 42% 86%;
}
.first{
border: #000 16px solid;
}
.second{
border: #00f 16px solid;
}
.third{
border: #f00 16px solid;
}
#media screen and (max-width:1367px){
.first{
border: #666 16px solid;
}
.second{
border: #66f 16px solid;
}
.third{
border: #6ff 16px solid;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body class="first">
<div id="glasses"></div>
<nav class="slides-navigation desktop">
Prev>
Next
</nav>
</body>
If I understand the question correctly, the problem revolves around the $(window).resize functions being inside of the if statements, rather than the other way around.
It should look more like this:
$(window).resize(function() {
if ($('body').hasClass('first')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
} else if ($('body').hasClass('second')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
} else if ($('body').hasClass('third')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "f00");
} else {
$("#glasses").css("background", "6ff");
}
}
});
Otherwise your code checks for for the body's class once, applies the resize function for only that class, and never knows to check again.
Your if statement
if ($('body').hasClass
Is only being run once, when the page loads.
You should move this into the next/prev event handler, so it re-calculates the resize event every time.

How to animate the list?

This is my JSFiddle
As you can see from the fiddle that there is a list that is being scrolled with the help of arrows.. So what I want is to animate that transition when the list visible and hidden.
I don't know about the animation. I have seen many examples and tried to adjust them with my example but it's not working... How do I get the list to animate?
$(document).ready(function(){
var code='';
for(var i=1;i<=20;i++)
{
code+="<li>list Item "+i+"</li>";
}
$('#list-items').html(code);
});
var list_items = [];
var index = 0;
var list_length = 0;
function getAllListItems() {
var temp = document.getElementsByTagName('li');
for (i = 0; i < temp.length; i++) {
list_items.push(temp[i]);
}
list_length = temp.length;
}
getAllListItems();
function move(dir) {
if (dir == left) {
list_items[index].style.display = 'block';
index--;
if (index < 0) {
index = 0;
}
} else if (dir == right) {
list_items[index].style.display = 'none';
if (index >= ((list_length) - 1)) {
index = (list_length) - 1;
} else {
index++;
}
} else {}
}
* {
box-sizing: border-box;
}
ul {
float:left;
height:50px;
width: 600px;
overflow: hidden;
}
ul li {
text-align: center;
border: 2px solid black;
width: 100px;
height: 50px;
float: left;
list-style-type: none;
background-color: aquamarine;
}
ul li:first-child {
display: block;
}
#left, #right {
float:left;
height:50px;
background-color:aqua;
font-size:2em;
padding-left: 20px;
padding-right:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload='getAllListItems()'>
<div id='t'></div>
<button id='left' onClick="move(left)">
<</button>
<ul id='list-items'>
</ul>
<button id='right' onClick='move(right)'>></button>
</body>
You can easily just replace your lines:
list_items[index].style.display = 'block';
list_items[index].style.display = 'none';
with the jQuery show() and hide() functions:
$(list_items[index]).show("slow");
$(list_items[index]).hide("slow");
As demonstrated in my updated version of your Fiddle
For different transitions, you can use the animate() function, which lets you tell it what css properties to affect. In addition to numeric values, jQuery also supports the special values 'show', 'hide', and 'toggle' (which, incidentally, will show, hide, or toggle the show/hide status of an element using that property). So for instance, if you wanted to shrink them only horizontally and leave the vertical alone, you could change the .show() and .hide() calls to:
$(list_items[index]).animate({width:'show'}, 600);
$(list_items[index]).animate({width:'hide'}, 600);
I've demonstrated this in another updated Fiddle

running jquery media query without reload

i have three different divs red, blue, green and yellow. red contains an input box. am trying to hide yellow if the input box in red is clicked(focus) and if the screen size is below 500. it does work but only if i reload the page is there any way to make it work without reloading the page?
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="s" placeholder="Search">
</form>
</div>
<div class="blue"> top </div>
<div class="green"> middle </div>
<div class="yellow"> bottom </div>
js
if ($(window).width() < 960) {
$(function(){
$(".s").on("focus",function()
{
$(".yellow").hide();
});
$(".s").on("blur",function()
{
$(".yellow").show();
});
});
}
else {
}
css
.red, .blue, .green, .yellow
{
padding: 10px;
border: 1px solid #f00;
}
.red{
background: red;
}
.blue{
background: blue;
}
.green{
background: green;
}
.yellow{
background: yellow;
}
.s:focus{
border: 1px solid black;
}
.s:focus + yellow{
display: none;
}
Instead of binding on load of the page, put the code in a function and call that function when you want it to be called. I added it in a function and called on click of a button for the demo.
Demo
$(document).ready(function () {
$('button').on('click', function () {
if (checkWidth()) { //checking width of window before binding the focus event
onFocusHandling();
}
});
});
function onFocusHandling() {
//you can also add the checkWidth() here than above
$(".s").on("focus", function () {
$('.yellow').hide();
});
$(".s").on("blur", function () {
$('.yellow').show();
});
}
function checkWidth() {
return ($(window).width() < 960);
}
Updated
Fiddle
Called the function onFocusHandling on window resize and on document ready
$(document).ready(function () {
onFocusHandling();
$(window).resize(function () {
onFocusHandling();
});
});
function onFocusHandling() {
if (checkWidth()) {
$(".s").on("focus", function () {
$('.yellow').hide();
});
$(".s").on("blur", function () {
$('.yellow').show();
});
}
else {
$(".s").off("focus").off("blur");
}
}
When the width is maximized unbind the focus and blur event.
The functionality you want can be done using a much simple way, here is my HTML
HTML
<div class="red">
<form>
<input type="text" class="s" id="txt" placeholder="Search"/>
</form>
</div>
<div class="blue">top</div>
<div class="green">middle</div>
<div class="yellow">bottom</div>
CSS
.red, .blue, .green, .yellow {
padding: 10px;
border: 1px solid #f00;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
.s:focus {
border: 1px solid black;
}
.s:focus + yellow {
display: none;
}
MY JS:
$(document).ready(function() {
var width = $(window).width();
$(window).resize(function() {
$(".s").trigger("blur");
$(".s").on("focus", function()
{
var width = $(window).width();
if (width < 960)
{
$(".yellow").hide();
}
});
$(".s").on("blur", function()
{
$(".yellow").show();
});
});
});
UPDATED JS:
$(document).ready(function() {
var width = $(window).width();
$(".s").trigger("blur");
$(".s").on("focus", function()
{
var width = $(window).width();
$("#det").text(width);
alert(width);
if (width < 960)
{
$(".yellow").hide();
}
});
$(".s").on("blur", function()
{
$(".yellow").show();
});
$(window).resize(function() {
$(".s").trigger("blur");
$(".s").on("focus", function()
{
var width = $(window).width();
$("#det").text(width);
alert(width);
if (width < 960)
{
$(".yellow").hide();
}
});
$(".s").on("blur", function()
{
$(".yellow").show();
});
});
});
What i am doing here is ,
Used window.resize()function in order to detect the resize of the page
Once window is resized, i trigger a blur function to the textbox, using $(".s").trigger("blur")
Then, I find the width of the window, only when the user focuses on the text
Once input box gets into focus again, I hide the Yellow div.
Here is a DEMO for your reference

Categories

Resources