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
Related
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>
I want a panel to show up for five seconds after a button is clicked....
Then if the user click on the panel (uses it...) the panel continues showing up,otherwise it hides for inactivation.
So the panel can increase its lifespan if the user uses it (click or hover on it)...otherwise it just fadeOut
What am I doing wrong?
I tried to use clearTimeout but it ends up in a wierd behaviour snippet. I tried reseting with booleans the code but as well...I couldnt make it work the way is expected
let ShowPanel = 0;
$('.ShowPanel5Seconds').on("click", function() {
ShowPanel = 1;
$(".Panel").show();
setTimeout(function() {
$(".Panel").fadeOut();
}, 5000)
});
//clicking hoverin on the panel
$('.Panel,.container').on("click", function(event) {
if (1 == ShowPanel) {
$('.ShowPanel5Seconds').trigger("click");
}
});
.container{
position:relative;
width:300px;
height:300px;
border:1px solid blue;
margin:10px
}
.Panel {
display: none;
position:absolute;
top:10px;
left:10px;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="container">
<div class="Panel">I'm the panel...click me to continue living</div>
</div>
An alternative, that works as expected is to keep a timeout variable with the time left to display the div.
let timeleft = 0;
function hide_or_not() {
timeleft = timeleft - 1;
if (timeleft <= 0) {
$(".Panel").fadeOut();
}
setTimeout(hide_or_not, 1000);
}
$('.ShowPanel5Seconds').on("click", function() {
$(".Panel").show();
if (timeleft <= 0) {
timeleft = 5;
hide_or_not();
}
});
//clicking hoverin on the panel
$('.Panel').on("click", function(event) {
timeleft = timeleft + 1;
});
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<scri
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
Note: The code is made to be readable, not exactly optimal.
You are overcomplicating it. Just show/extend time in one go
let panel = $('.Panel'),
panelTimer;
function showAndExtendPanel(){
panel.stop(true,true).show();
clearTimeout(panelTimer);
panelTimer = setTimeout(killPanel, 5000)
}
function killPanel(){
panel.fadeOut();
}
$('.ShowPanel5Seconds, .Panel').on("click", showAndExtendPanel);
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
You can control this by addClass, removeClass() and :not() selector
// on button click show/fadeOut the panel but not the panel with class hover
$('.ShowPanel5Seconds').on("click", function() {
$(".Panel:not(.hover)").show();
setTimeout(function() {
$(".Panel:not(.hover)").fadeOut();
}, 5000)
});
// when hover over the panel add class hover and remove it when unhover and trigger the button click
$('.Panel:not(.hover)').hover(function(event){
$(this).addClass('hover');
} , function(){
$(this).removeClass('hover');
$('.ShowPanel5Seconds').click();
});
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
What I want is to be able to do something when the input get focus or lose it(both event).
I tried the following, but this works separately(when coded separately) by event: only on focus, or only on losing focus.
Also, I want it cross platform as possible(including touch devices), would this be enough(focus and blur) or there is some other events I need to care?
HTML:
<input type="text" class="inp">
<div id="zzz" class=""></div>
CSS:
div {
height: 100px;
width: 100px;
background: #000;
}
.one {
background: #ff0;
}
jQuery(3.2.1):
$(document).ready(function() {
// Also tried using: $(".inp").focus.blur(function() {
$(".inp").on("keypress", "focus", "blur", function () {
if ( !$(this).val() ) {
$("#zzz").removeClass("one");
}
else {
$("#zzz").addClass("one");
}
});
});
Another way of doing this is -
You have to change this -
$(".inp").on("keypress", "focus", "blur", function () {
to
$(".inp").on("keypress focus blur", function () {
$(document).ready(function() {
// Also tried using: $(".inp").focus.blur(function() {
$(".inp").on("keypress focus blur", function () {
if ( !$(this).val() ) {
$("#zzz").removeClass("one");
}
else {
$("#zzz").addClass("one");
}
});
});
div {
height: 100px;
width: 100px;
background: #000;
}
.one {
background: #ff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp">
<div id="zzz" class=""></div>
Give all the event listeners separately and invoke a function on them it will work.
$(document).ready(function() {
$(".inp").on("keypress",function () {
doSomething();
});
$(".inp").on("focus",function () {
doSomething();
});
$(".inp").on("blur",function () {
doSomething();
});
});
function doSomething()
{
if ( !$(".inp").val() ) {
$("#zzz").removeClass("one");
}
else {
$("#zzz").addClass("one");
}
}
div {
height: 100px;
width: 100px;
background: #000;
}
.one {
background: #ff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp">
<div id="zzz" class=""></div>
OR
If you really want to combine all the events then follow the below approach:
$('#element').on('keypress blur focus', function(e) {
// e.type is the type of event fired
});
See the code example below:
$(document).ready(function() {
$('.inp').on('keypress blur focus', doSomething);
});
function doSomething()
{
if ( !$(".inp").val() ) {
$("#zzz").removeClass("one");
}
else {
$("#zzz").addClass("one");
}
}
div {
height: 100px;
width: 100px;
background: #000;
}
.one {
background: #ff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp">
<div id="zzz" class=""></div>
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>
I can hover on the button using jquery. Can someone please point me to the right direction on how to hover on the
function setColor(btn, color) {
var property = document.getElementById(btn);
if (window.getComputedStyle(property).BackgroundColor == 'rgb(0, 0, 0)') {
property.style.backgroundColor = color;
} else {
property.style.backgroundColor = "#000";
}
}
function setColor(btn, color) {
var property = document.getElementById(btn);
if (window.getComputedStyle(property).backgroundColor == 'rgb(244, 113, 33)') {
property.style.backgroundColor = color;
} else {
property.style.backgroundColor = "#f47121";
}
}
document.addEventListener('onclick', function(e) {
if (!(e.id === 'btnHousing')) {
document.getElementById('btnHousing').property.style.backgroundColor = '#FFF'
}
});
$(document).ready(function() {
$("button").hover(function() {
$(this).css("backgroundColor", "#fff");
}, function() {
$(this).css("backgroundColor", "#9d9d9d");
});
});
div {
height: 100px;
width: 300px;
background-color: black;
}
button {
height: 50px;
width: 150px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
<button type="button" id="btnBell">
</button>
</div>
area also and make the button white on hover?
Please check!
https://jsfiddle.net/obw6ec9v/
There is no need of javascript just css will do.
Also if you want to retain the color, on click you can use a additional class like
jQuery(function($) {
$('#notification-dropdown').click(function() {
$(this).find('button').addClass('clicked');
})
})
div {
height: 100px;
width: 300px;
background-color: black;
}
button {
height: 50px;
width: 150px;
position: relative;
background-color: #9d9d9d;
}
#notification-dropdown:hover button {
background-color: #fff;
}
#notification-dropdown button.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
<button type="button" id="btnBell"></button>
</div>
With javascript
$(document).ready(function() {
$("#notification-dropdown").hover(function(e) {
var $btn = $('button', this);
if (!$btn.hasClass('clicked')) {
$btn.css("backgroundColor", e.type == 'mouseenter' ? "#fff" : '#9d9d9d');
}
}).click(function() {
$('button', this).addClass('clicked').css("backgroundColor", 'red');
})
});
div {
height: 100px;
width: 300px;
background-color: black;
}
button {
height: 50px;
width: 150px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown">
<button type="button" id="btnBell"></button>
</div>
You can also replace onclick with onmouseover
<div class="dropdown" id="notification-dropdown" onmouseover="setColor('btnBell','#9d9d9d');">
See JSFiddle
You can just change the target you're listen for hover to that div, then use $("#btnBell") instead of $(this) to change the button's color.
function setColor(btn,color){
var property=document.getElementById(btn);
if (window.getComputedStyle(property).backgroundColor == 'rgb(244, 113, 33)') {
property.style.backgroundColor=color;
}
else {
property.style.backgroundColor = "#f47121";
}
}
document.addEventListener('onclick', function(e){
if(!(e.id === 'btnHousing')){
document.getElementById('btnHousing').property.style.backgroundColor = '#FFF'
}
});
$(document).ready(function(){
$("div").hover(function(){
$("#btnBell").css("backgroundColor", "#fff");
}, function(){
$("#btnBell").css("backgroundColor", "#9d9d9d");
});
});
div{
height:100px;
width:300px;
background-color:black;
}
button{
height:50px;
width:150px;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
<button type="button" id="btnBell" >
</button>
</div>