Get links to stay active - javascript

I have 4 options that, when clicked, the clicked option becomes focused and its background-color/text color change, while all the other revert to the normal states. I have some code where I can change font color, but I can't figure out how to change the div color. I'm also trying to figure out in CSS and with this code how to have one of the options be by default highlighted when the page loads.
Jquery- the last line "($("a")" is the line of code that changes font color; the code above it has to do with a filtering system I have on the page.
$(function () {
var $panels = $( '#image-wrapper .panel' );
$( '#category > div > a' ).on( 'click', function (event) {
event.preventDefault();
var categoryToShow = $( this ).data( 'filter' );
$panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
$("a").addClass("active-color").not(this).removeClass("active-color");
/*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
} );
});
HTML
<div id="category">
<div class="all-div current-div">
<h2>ALL</h2>
</div>
<div class="ed-div current-div">
<h2>EDITORIAL</h2>
</div>
<div class="pr-div current-div">
<h2>PR</h2>
</div>
<div class="cr-div current-div">
<h2>CREATIVE</h2>
</div>
</div>
CSS
#content,
#category {
overflow: hidden;
}
#category div {
float: left;
margin: 40px 0 0 0;
height: 100px;
width: 240px;
background-color: #F5F5F5;
}
#category .all-div {
background-color: #000000;
}
#category .all-div a {
color: #ffffff;
}
.active-color {
color: #000000;
background-color: green;
}
.active-bg {
background-color: green;
}

Well, .on was not working on your selector so i changed it to .live and changed your selector for the backgrounds to .current-div because your a tags need display: block to have a visible background.
check this:
http://jsfiddle.net/A3n7S/15/
$(function () {
var $panels = $( '#image-wrapper .panel' );
$(".current-div").not('.all-div').first().addClass("active-color")
$( '#category > div > a' ).live( 'click', function (event) {
event.preventDefault();
var categoryToShow = $( this ).data( 'filter' );
$panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
$(".current-div").not('.all-div').removeClass("active-color");
$(this).parent().addClass("active-color");
/*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
} );
});
Replace that:
.active-color {
color: #000000;
background-color: green;
}
with:
#category .active-color {
color: #000000;
background-color: green;
}

Related

How to change content of div on hover using JQuery/Javascript

I'm trying to change the contents of a div when it's hovered over using JQuery. I've seen answers on stack overflow, but I can't seem to get it working.
I've tried
$( "imgDiv" ).mouseover(
function() {
$("tdiv").textContent = "hovering";
},
function() {
$("tdiv").textContent = 'title';
}
);
I've also replaced "mouseover" with "hover". I've used a variable and the actual div in place of "imgDiv".
This is what my code looks like:
imgDiv = document.getElementById('imgDiv');
tDiv = document.getElementById('titleDiv');
$( "imgDiv" ).mouseover(
function() {
$("tdiv").textContent = "hovering";
}, function() {
$("tdiv").textContent = 'title';
}
);
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id=titleDiv>title</div>
</div>
You can use jQuery's .hover() function along with the .text() function to do what you want. Also, no need for document.getElementById:
$("#imgDiv").hover(
function() {
$("#titleDiv").text("hovering");
},
function() {
$("#titleDiv").text('title');
}
);
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id="titleDiv">title</div>
</div>
You can target the div with jQuery, and store it's original value. On mouseout, you can restore it. Also using mouseenter reduces the number of times the logic processes as mouseover will fire for every mouse move over the element.
var $titleDiv = $('#titleDiv');
$("#imgDiv")
.on('mouseenter', function() {
$titleDiv.data('originalText', $titleDiv.text());
$titleDiv.text('hovering');
})
.on('mouseout', function() {
$titleDiv.text($titleDiv.data('originalText'));
});
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id="titleDiv">title</div>
</div>
First of all, replace $("imgDiv") with $("#imgDiv") to get the element with id (#) imgDiv.
Then $("tdiv") doesn't exist, you probably mean $("div") to select a <div>tag in your DOM.
And finally, $("tdiv").textContent doesn't exist. You can try $("div").html() or $("div").text() to get the <div> tag content
--
Quick reminder : jQuery documentation on selectors
$("div") will select the <div> tags
$(".element") will select tags with class="element"
$("#element") will select tags with id="element"
You need to try like this
$( "#imgDiv" ).mouseover(function() {
$("#titleDiv").text("hovering");
}).mouseleave( function() {
$("#titleDiv").text('title');
});
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id=titleDiv>title</div>
</div>
Easy solution,
var s = document.getElementsByTagName('div');
function out() {
s[0].innerHTML = 'hello';
}
function ibn() {
s[0].innerHTML = 'Myname';
}
<div onmouseout = 'out()' onmouseenter = 'ibn()'> Myname </div>
You cannot call reference a dom with pure Javascript and them manipulate it with jQuery - it will not work.
Try this:
$( "#imgDiv" ).mouseover(function() {
$("#titleDiv").text("hovering");
});
The titleDiv id has to be referenced in your code using "#", then the id name.
Also, use $("#name_of_id").text("your content") instead of .textContent()

Why does replaceWith cancels calls to its variable?

I'm trying to clone dom elements and change their tags. But after I replace the main element I cannot change its children nor apply some click events.
I commented line after which it stops working.
Thanks for help!
http://codepen.io/sanns/pen/eJvzBN?editors=101
var selectDom = $('select');
selectDom.each(function() {
var clone = $(this).clone().insertAfter(this);
//take classes from clone
var classesStr = clone.attr('class');
clone = clone.replaceWith(function(index, oldHTML) {
return $('<div class="custom-select ' + classesStr + '">').html(oldHTML);
});
//why does not work?
clone.find('option').replaceWith(function(index, oldHTML) {
return $('<li>').html(oldHTML);
});
clone.wrapInner('<ul class="scrollbox"></ul>').prepend('<span class="shower"> Выберитеtttttttttteeeee тратататататат</span>');
//BEHAVIOR SELECT
clone.on('click', function() {
alert('asdf');
});
});
Actually .replaceWith() returns the original jQuery object, not the replacement with something.
You can find more details : http://api.jquery.com/replacewith/
Here is the small example of it:
$( "button" ).click(function() {
$( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
});
button {
display: block;
margin: 3px;
color: red;
width: 200px;
}
div {
color: red;
border: 2px solid blue;
width: 200px;
margin: 3px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>First</button>
<button>Second</button>
<button>Third</button>

I want to change the text in a box when it is hovered

I have created a box that I want the text to change in when the h3 tag is hovered? What is the easiest way to achieve this?
Here is my html:
<h3>Hover me to find out more</h3>
<div id="next-text">Here is where you find out more.</div>
Here is my css:
h3 {
border: 3px solid hsl(288, 49%, 29%);
border-radius: 20px;
line-height: 40px;
padding: 52px;
text-align: center;
width: 19%;
float: left;
margin-left: 15px;
height: 305px;
}
Also I have multiple h3 tags and divs.
hover event has two function mouseenter and mouseleave
$( "h3" ).hover(
function() {
$( this ).text( "changed text" );
}, function() {
$( this ).text( "Hover me to find out more" );
}
);
You can try like this:
var oldtext = null;
$("h3").hover(
function() {
oldtext = $(this).text();
$(this).text("changed text");
}, function() {
$(this).text(oldtext);
}
);
Refer this jquery hover
You can use JQuery like this https://jsfiddle.net/2Lzo9vfc/184/
JS
$('h3').hover(
function() {
var $this = $(this);
$this.data('originalText', $this.text());
$this.text("Hover text");
},
function() {
var $this = $(this);
$this.text($this.data('originalText'));
}
);
HTML
<h3>Hover me to find out more</h3>
try this code:
$( "h3" ).hover(function() {
$( this ).text("new text");
});
If you want the text content to change use one of the other answers (preferebly #WisdmLabs):
$( "h3" ).hover(
function() {
$( this ).text( "changed text" );
}, function() {
$( this ).text( "Hover me to find out more" );
}
);
if you want the styling to change add a h3:hover to your css.
If you want to using css then try this:
html:
<h3><span>Hello!</span></h3>
css:
h3:hover span {display:none}
h3:hover:before {content:"Reply!"}
or using JS then try this https://jsfiddle.net/2Lzo9vfc/184/
div.project h1, div.project h3, div.project p {
opacity: 0;
transition: 0.8s;
}
div.project:hover h1, div.project:hover h3, div.project:hover p {
opacity: 1;
}
Try follwing using jquery:
$('h3').mouseenter(function(){
$(this).next('div').html('changed text');
})
If you want to get original text back on mouse leave then do like following.
var previous='';
$('h3').mouseenter(function() {
previous=$(this).next('div').html();
$(this).next('div').html('changed text');
})
.mouseleave(function() {
$(this).next('div').html(previous);
});

<button> JQuery onclick works only once

I have a button onclick event that works fine like here:
// create function to remove "popup-open" classes
// function used in onclick attribute
(function( $ ){
$.fn.popupClose = function() {
$( "body" ).removeClass( "popup-open" )
$( ".overlay_btn" ).removeClass("popup-open");
return this;
};
})( jQuery );
// if a <button> exists
// onclick read button ID value
// add "popup-open" class to span with IDvalue as class, with fadein effect
if ( $( "button.popup" ).length )
{
$("button.popup").click( function()
{
var btnId = $(this).attr('id');
$( "body" ).hide().addClass( "popup-open" ).fadeIn(100);
$( "."+ btnId ).hide().addClass( "popup-open" ).fadeIn(200);
}
);
}
if ( $( "button.link" ).length )
{
$("button.link").click( function()
{
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
//alert(btnFormAction);
window.open(btnFormAction, btnTarget);
}
);
}
button {
padding: 10px;
font-size: 1.5rem;
background-color: #d5d5d5;
border: 3px solid #ddd;
margin: 15px;
box-shadow: 0px 0px 15px #888888;
cursor: pointer;
}
button:hover {
box-shadow: 0px 0px 10px #888888;
}
body:after {
content: "";
display: none;
position: fixed; /* could also be absolute */
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background: rgba(0,0,0,0.6);
}
.overlay_btn {
display: none;
padding: 10px;
width: 300px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #fff;
border-radius: 5px;
text-align: center;
z-index: 11; /* 1px higher than the overlay layer */
}
body.popup-open:after, .popup-open {
display: block;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!--create a button with unique ID* -->
<button id="btn-popup01" class="popup">popup button 1</button>
<!-- create a span with the button#IDvalue as class value-->
<span class="overlay_btn btn-popup01">close
<h3>your content title 1</h3>
<p>your content 1</p>
</span>
<!--create a button with unique ID* -->
<button id="btn-popup02" class="popup">popup button 2</button>
<!-- create a span with the button#IDvalue as class value-->
<span class="overlay_btn btn-popup02">close
<h3>your content title 2</h3>
<p>your content 2</p>
</span>
<!--create a button with unique ID* -->
<button id="btn-link01" class="link" formaction="http://s.emp.re/1KAZEXZ" formtarget="_blank">link button 3</button>
<p>Here, you have a JS-less equivalent, but with much more CSS (LESS): http://codepen.io/maccadb7/pen/nbHEg</p>
</body>
</html>
Using the same code in this project: http://kine.sarabernaert.be/contact/
Button 'Maak Afspraak' gives a popup
on the popup there's a button 'Ga naar aanmelden' that links to a outside link.
I can't get working this link. When click, nothing happens. In my demo setup, same code is working well.
Any hints? Don't see what I'm doing wrong.
Thx!
Replace your .click() method to .on() method and place them inside $(document).ready at the bottom of the page
In your case, instead of if ( $( "button.link" ).length ) you can use something like below.
$("body").on('click', 'button.link', function(){
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
window.open(btnFormAction, btnTarget);
});
Overall, your scripts should probably look like this
$(document).ready(function(){
$("body").on("click", "button.popup", function(){
var btnId = $(this).attr('id');
$( "body" ).hide().addClass( "popup-open" ).fadeIn(100);
$( "."+ btnId ).hide().addClass( "popup-open" ).fadeIn(200);
}).on('click', 'button.link', function(){
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
window.open(btnFormAction, btnTarget);
});
$.fn.popupClose = function() {
$( "body" ).removeClass( "popup-open" )
$( ".overlay_btn" ).removeClass("popup-open");
return this;
};
});
I tested it on your site and it seems to be working after that. I got redirected to a login page I guess.
Hope this helps.

Getting CSS Properties and writing to the page live with jQuery

I am trying to get the names and values of CSS properties and write them to the page. The problem is the values don't change live i.e., e.g. the opacity should show a decreasing value from 1 to 0 live. Also the padding, border and margin values are not shown. This can be seen by opening up the page in firefox and using firebug to inspect it.
The Markup
<div id="container">
<div id="box">click to hide me</div>
<p id="result"> </p>
</div>
The Styles
#container {
overflow: auto;
}
#box {
width: 400px;
height: 400px;
padding: 10px;
border: 5px solid black;
margin: 15px;
background-color: red;
text-align: center;
float: left;
}
#result {
width: 400px;
height: 200px;
border: 1px solid #CCCCCC;
background-color: #EEE;
float: right;
margin-right: 20px;
}
The Script
$(document).ready(function() {
$( "#box" ).click(function() {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $( this ).css(["width", "height", "padding", "border", "margin", "opacity", "display"]);
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
$( "#result" ).html( html.join( "<br>" ) );
});
$("#box").click(function() {
$("#box").hide(5000);
});
});
Just to be clear I am noob with jQuery/javascript and I am trying to find out which and what values the jQuery hide() method changes. Using firebug in firefox I see that the the height, width, border, padding, margin, opacity and display are nulled. I am trying to show that in the page itself in the result div.
fiddle
You have several issues here.
You cannot get margin, padding, and border css properties in one go. You need to get something like marginTop, paddingBottom, borderWidth and so on.
You need to get status update to separate function, an then call it on progress of your hide.
$.fn.update = function(element) {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $( this ).css(["width", "height", "opacity", "display"]);
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
element.html(html.join("<br>"));
}
var box = $("#box");
box.click(function() {
box.hide({
duration: 5000,
progress: function() {
box.update($("#result"));
}
});
});
Fiddle for ya

Categories