Getting CSS Properties and writing to the page live with jQuery - javascript

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

Related

How to execute a function when two text in different variables are equal

I have two divs, one has class name ".tab" and the other has the id name "#director". I want to execute a function when "#director" element has the text "left". I want to change the background of .tab div to green when it is clicked but if only the #director element has the text "left" in it. so the function i made keeps not executing. Here is my code:-
var leftText = "left";
var directorText = $('director').text();
$(".tab").click(function(){
if (leftText == directorText) {
/*Your Stuff Here*/
$( ".tab" ).css( "background", "green" );
}
});
div{
height: 100px;
width:100px;
margin: 50px;
float: left;
background:#ddd;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab"></div>
<span id="director">left</span>
The jQuery selector for ids would be var directorText = $('#director').text();

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>

Replace selection inputs with clickable images

MY code below lets me take an HTML selection and provide a more user friendly image clickable version. When an image is clicked, it selects the proper value in a hidden selection filed in the DOM.
I just need help in adjusting my code below to work on a selection that is on the page multiple times.
If it is on the page 10 times, I need to run this code 10 times.
I am not sure how to target each one separately though
Preview
HTML Selection gets turned into clickable Images like this below. The JavaScript reads the HTML Selection filed already on the page and clones it and replaces each value with images. It then hides the original selection field. When an image is clicked on, and appears selected, it is using JavaScript to select that value in the real hidden selector as well!...
Live Demo
http://jsfiddle.net/jasondavis/ov1a4apc/
JavaScript
jQuery(document).ready(function($) {
if ($('#page_template').length) {
//$('#page_template').hide().after('<div id="page_template_visual"></div>');
$('#page_template').after('<div id="page_template_visual"></div>');
$('#page_template option').each(function() {
var classname = $(this).val().replace('.php', '');
if ($(this).is("[selected]")) {
classname = classname + ' selected';
}
$('#page_template_visual').append('<small></small>' + $(this).text() + '');
});
if (!$('#page_template option[selected]').length) {
$('#page_template_visual a:first-child').addClass('selected');
}
$('#page_template_visual a').on('click', function() {
$('#page_template_visual a').removeClass('selected');
theValue = $(this).addClass('selected').attr('href');
$("#page_template").val(theValue).attr('selected', true);
return false;
});
}
});
HTML Select
<select name="page_template" id="page_template" selected="selected">
<option value="default">Default Template</option>
<option value="custom-archives.php">Archives Template</option>
<option value="wpi/pdf_quote_bold.php">Bold</option>
<option value="SOONcontact.php">Contact</option>
<option value="page-invoice.php">Invoice</option>
<option value="wpi/pdf_quote_modern.php">Modern</option>
<option value="wpi/pdf_quote.php">Traditional</option>
</select>
CSS
#page_template{
/* display: none; */
}
#page_template_visual {
margin: 0 -10px;
}
#page_template_visual a {
display: inline-block;
width: 129px;
height: 100px;
margin: 0 5px 5px;
text-align: center;
color: #333333;
font-weight: bold;
text-decoration: none;
background: url('http://i.imgur.com/7S9yzTY.png') no-repeat left top;
}
#page_template_visual a small {
height: 64px;
width: 119px;
display: inline-block;
margin: 5px 5px 5px 5px;
}
/* You can define images for the options here based on the classnames */
#page_template_visual a.template-both-sidebar-page {background-position: right -100px;}
#page_template_visual a.template-left-sidebar-page {background-position: right top;}
#page_template_visual a.template-right-sidebar-page {background-position: left -100px;}
#page_template_visual a.selected {
color: #559a08;
text-shadow: 1px 1px 0px #fff;
}
#page_template_visual a.selected small {
background: rgba(106,189,15,0.1) url('http://i.imgur.com/P0E1jmh.png') no-repeat center;
}
First, you need to change the page_template and page_template_visual ids to classes (in the HTML, JavaScript & CSS).
Then loop through all the elements with the page_template class, like this:
jQuery(document).ready(function($) {
$('.page_template').each(function() {
var $select = $(this);
// Keep a reference to this element so you can use it below.
var $visual = $('<div class="page_template_visual"></div>');
$select.after($visual);
$select.find('option').each(function() {
var $option = $(this);
var classname = $option.val().replace('.php', '');
if ($option.is("[selected]")) {
classname = classname + ' selected';
}
$visual.append('<small></small>' + $option.text() + '');
});
if (!$select.find('option[selected]').length) {
$visual.find('a:first-child').addClass('selected');
}
// The next line could have been:
// $visual.find('a').on('click', function() {
// But instead it uses event delegation, so only one
// event handler is registered, instead of one for each <a>.
$visual.on('click', 'a', function() {
$visual.find('a').removeClass('selected');
var value = $(this).addClass('selected').attr('href');
$select.val(value);
return false; // You don't need this, unless you really don't want the click event to bubble up.
});
});
});
jsfiddle

<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.

Get links to stay active

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;
}

Categories