I have an HTML page that lays out div components and every div component call a function and pass this as an object. The div looks like this:
<div id="pull-requests-view">
<div class="green-header">This is the 1st title</div>
# this is the div that will flash on double click
<div class="green" ondblclick="flashAndMessage(this)" onclick="unblink(this)" id="tile0">
<img class="profile-photo" src="someImageURL">
<div class="pill-green">
<a class="hypLink" href="UNIQUE_LINK_FOR_EACH_DIV" target="_blank">tag information</a>
</div>
</div>
</div>
What's really happening here is that there are multiple divs like that with different id. When I click double click on the div its calls the flashAndMessage() with argument this which results in my div to blink and flash using JQuery fadeIn() and fadeOut().
Details aside, the actual problem is that I have polling implemented that re-renders the HTML including all the divs. So basically the flashing and blinking is lost once the page updates.
I have tried global variables that store the this object before the page reloads and tries to pass the variables to jQuery find() function so that flashAndMessage() could be re-applied.
However it is not working for me. Here are my functions:
function unblink(selector) {
$(selector).stop()
$(selector).fadeIn({opacity: 1})
}
function blink(selector) {
$(selector).fadeOut('slow', function () {
$(this).fadeIn('slow', function () {
blink(this);
});
});
}
function flashAndMessage(selector) {
var pullReqURL = $(selector).find('.hypLink').attr('href')
blinkList.push(selector) # this is where the `div` is stored before the page reloads
blink(selector)
}
Note: The blinkList is a global array that is defined on top of everything else. I have a loop that runs after the divs are reloaded and I do see those divs that I stored in the list. However, when I iterate through that list and pass the obj to the flashAndMessage(), it does not work. It feels like the object is not the same when re-drawn or it loses some identity.
Code snippet not work because of restrictions, but code is tested and functional.
function unblink(selector) {
$(selector).stop();
$(selector).fadeIn({opacity: 1});
sessionStorage.href = "";
}
function blink(selector) {
$(selector).fadeOut('slow', function () {
$(this).fadeIn('slow', function () {
blink(this);
});
});
}
function flashAndMessage(selector) {
sessionStorage.href = $(selector).find('.hypLink').attr('href');
blink(selector);
}
if (sessionStorage.href) {
flashAndMessage($("a[href='"+sessionStorage.href+"']").parent().parent());
}
<div id="pull-requests-view">
<div class="green-header">This is the 1st title</div>
<div class="green" ondblclick="flashAndMessage(this)" onclick="unblink(this)" id="tile0">
<img class="profile-photo" src="someImageURL">
<div class="pill-green">
<a class="hypLink" href="UNIQUE_LINK_FOR_EACH_DIV" target="_blank">tag information</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Assuming you have a parent to <div id="pull-requests-view"> that is not getting reloaded with your polling code, you should use event delegation (and not inline event handlers).
<div id="parent-id-that-isnt-updated">
<div id="pull-requests-view">
...
</div>
</div>
You can attach your event listeners to the parent that doesn't update and have it only trigger when the clicked element matches the selector:
var $staticParent = $('#parent-id-that-isnt-updated');
$staticParent.on('dblclick', '.green', function() {
flashAndMessage(this);
});
$staticParent.on('click', '.green', function() {
unblink(this);
});
Related
I need to run same method for multiple div elements. The code is give here:
<div class="opage" id="oddPage">
<img>
</div>
<div class="epage" id="evenPage">
<img>
</div>
<div class="opage" id="oddPage">
<img>
</div>
<div class="epage" id="evenPage">
<img>
</div>
<div class="opage" id="oddPage">
<img>
</div>
<div class="epage" id="evenPage">
<img>
</div>
and JS code is:
function flip() {
document.getElementById("oddPage").style.webkitTransform = "rotateY(-180deg)";
document.getElementById("evenPage").style.webkitTransform = "rotateY(0deg)";
}
function flop() {
document.getElementById("oddPage").style.webkitTransform = "rotateY(0deg)";
document.getElementById("evenPage").style.webkitTransform = "rotateY(180deg)";
}
My requirement is if I click on odd page flip() is called and if I click on even page odd function is called.
I did it using
$(document).ready(function(){
$('.opage').click(flip);
$('.epage').click(flop);
});
It works fine on first odd and first even page page but not on next pages. Then I came to know that multiple divs cannot have same Ids. So changed ids to oddPage1, evenPage1, oddPage2, evenPage2, oddPage3, evenPage3 and then tried it with getElementbyClassName in flip() and flip() but it did not work at all.
Then i tried this also
$(document).ready(function(){
$('.opage').click(function(){
$('opage').css('-webkit-Transform', 'rotateY(-180deg)');
$('epage').css('-webkit-Transform', 'rotateY(0deg)';
});
$('.epage').click(function(){
$('opage').css('-webkit-Transform', 'rotateY(0deg)';
$('epage').css('-webkit-Transform', 'rotateY(-180deg)');
});
});
But it is not working. I am new to jquery and learning it gradually.
$('#oddPage').click(flip);
$('#evenPage').click(flop);
if there are multiple elements with this id, change it to a class because ids are unique and reference it with a .
$('.oddPage').click(flip);
$('.evenPage').click(flop);
Simply use the following w/Jquery:
function flip() {
//Something on odd page;
//Something on even page;
}
function flop() {
//Something on odd page;
// Something on even page;
}
$('#evenPage').click(function(){
flop();
});
$('#oddPage').click(function(){
flip();
});
If you have multiple uses of evenPage and oddPage you will need to change these to classes.
I'm trying to make a text editable on clicking it. Below is the code I'm trying. When the title is clicked it shows an input box and button to save it.
<div class="block">
<div class="title">Title</div>
<div class="title-edit">
<input type="text" name="title" value="Title">
<button>Save</button>
</div>
</div>
I have changed other properties like color or changing the text of the elements and its working, but it is not applying the display property or .show()/.hide() function on the title or edit elements.
Below is my jQuery
$(function(){
$('.block').on('click', editTitle);
$('.title-edit button').on('click', saveTitle);
});
function saveTitle(){
var parent = $(this).closest('.block');
var title = $('.title', parent);
var edit = $('.title-edit', parent);
$(title).show();
$(edit).hide();
}
function editTitle(){
$('.title-edit', this).show();
$('.title', this).hide();
}
Here's the jsfiddle
https://jsfiddle.net/ywezpag7/
I've added
$(title).html('abcd');
to the end to show that other properties/functions are working, but just not the display.
For checking the html change on title element you will have to check the source through developer tools cause the title element is hidden.
Where am I going wrong?
Your problem is in the function saveTitle. The first line must stop the event propagation otherwise after this function the editTitle function is called.
The snippet:
$(function(){
$('.block').on('click', editTitle);
$('.title-edit button').on('click', saveTitle);
});
function saveTitle(e){
// this line
e.stopPropagation();
var parent = $(this).closest('.block');
var title = $('.title', parent);
var edit = $('.title-edit', parent);
title.show();
edit.hide();
title.text($('.title-edit input').val());
}
function editTitle(e){
$('.title-edit', this).show();
$('.title', this).hide();
}
.title-edit{
display:none
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="block">
<div class="title">Title</div>
<div class="title-edit">
<input type="text" name="title" value="Title">
<button>Save</button>
</div>
</div>
The issue as mentioned already is that your click events are fighting. In your code, the title-edit class is within the block, so when you click on the save button it triggers events for both clicks.
The easiest and, imho, cleanest way to resolve this is to switch your click event to be called on .title, and .title-edit button. You can also simplify the code beyond what you've got there.
$(function(){
$('.title').click(editTitle);
$('.title-edit button').click(saveTitle);
});
function saveTitle(){
$('.title').show();
$('.title-edit').hide();
$(title).html('abcd');
}
function editTitle(){
$('.title-edit').show();
$('.title').hide();
}
https://jsfiddle.net/ywezpag7/7/
I tried debug your code, and I had seen, that then you click to "Save" button, handled both functions, saveTitle() and editTitle(), and in that order. Therefore, the elements initially hidden, and then shown.
I have a header on my page, and block with boxes. That boxes represents my projects. When I click on one of them it is suppose to change my header background.
<div class="row">
<div class="job-one one-half column" onclick="headerProjBackground()">
<p>First</p>
</div>
<div class="job-two one-half column" onclick="headerProjBackground()">
<p>Second</p>
</div>
</div>
And my function:
function headerProjBackground(){
if($(this).hasClass('job-one')){
console.log('Hi!');
$('header').css('background-image': 'url(css/images/first-thing.png)');
}
if($(this).hasClass('job-one')){
console.log('Hello!');
$('header').css('background-image': 'url(css/images/second-thing.png)');
}
}
But it is not working. It can't understand my (this). There are no errors in the console. So this is logical mistake.
Onlcick attribute in Javascript by default Runs under Window, that means "this" object in the the function will always be window and as it doesn't have any class associated with it, so it will always give false in both if statement.
Refer below updated code snippet -
$('.jSelector').click(function(){
if($(this).hasClass('job-one')){
console.log('First Clicked!');
}
if($(this).hasClass('job-two')){
console.log('Second Clicked!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="job-one one-half column jSelector">
<p>First</p>
</div>
<div class="job-two one-half column jSelector">
<p>Second</p>
</div>
</div>
Hope this helps!!
Outside of the onclick attribute, this is no longer defined. You can fix this in (at least) two ways.
Alt 1: Pass this as a parameter:
<div class="job-one one-half column" onclick="headerProjBackground(this)">
function headerProjBackground(clicked) {
//Replace this with clicked in the code of the function.
Alt 2: Do the event binding with jQuery instead of with HTML attributes:
<div class="job-one one-half column backgroundchanger">
$(".backgroundchanger").click(function() {
//Put the same code as for headerProjBackground() in your question.
//Here you can use the this keyword.
});
And some further thoughts: The way you have coded this is not very good if you want it compact (and clear). So lets try to improve it some! If you go with Alt 2 you could use a custom data- attribute to shorten the code:
<div class="one-half column" data-background="css/images/first-thing.png">
//If something that has the data-background attribute is clicked.
$('[data-background]').click(function() {
//Get the value from the data-background attribute, and use that as background image.
var background = $(this).attr('data-background');
$('header').css('background-image': 'url(' + background + ')');
});
Or, if you use Alt 1, you could just pass the desired background url as a parameter instead of this.
You can remove the onclick attribute on your divs and add the following, also the .css method has two parameters with comma between them.
<script type="text/javascript">
// once the dom is ready
$(document).ready(function() {
// check if any of the divs with column class is clicked
$('.column').click(function() {
// trigger the function and pass the (this) which is the object for the div clicked
headerProjBackground(this);
});
});
// element passed will be worked on in the function
function headerProjBackground(element){
if($(element).hasClass('job-one')){
console.log('Hi!');
$('header').css('background', '#000');
}
if($(element).hasClass('job-two')){
console.log('Hello!');
$('header').css('background', '#DDD');
}
}
</script>
Got a quick question here. I'm not sure if this is possible but.. I want to have a tooltip-ish function going on on my website. However, i want it to be kinda dynamic, so i don't have to have 100 unique divs.
If i have 4 divs, that looks the same, how would i go about just displayig the tooltip inside the div am hovering?
Example
<div id="theLink" class="123">
<img src="images/icons/icon_pc.png" alt="">
<div class="tooltip_websites">
<div class="arrow_up"></div>
<p>aiuwd hiau dhwuiaw diuah dwiauh dwaiuwd haiwudh</p>
</div> <!-- end tooltip_websites -->
</div> <!-- end bullet-circle -->
what if i have 4 divs like that, and when i hover #thelink i wanna display the "tooltip_website" for that current div? and not displaying the three others?
Right now I'm using:
$("#theLink").hover(
function () {
$(".tooltip_websites").stop(true).fadeIn();
},
function () {
$(".tooltip_websites").stop(true).fadeOut();
});
But if i want it to be more dynamic, what could i do?
use .find() to only target the elements that lie within selected dom:
$("#theLink").hover(
function () {
$(this).find(".tooltip_websites").stop(true).fadeIn();
},
function () {
$(this).find(".tooltip_websites").stop(true).fadeOut();
});
Use this
$(".tooltip_websites",this).stop(true).fadeIn();
what if i have 4 divs like that,
IDs must be unique use classes instead.
Change your HTML as
<div class="theLink" class="123">
JavaScript
$(".theLink").hover(
function () {
$(this).find(".tooltip_websites").stop(true).fadeIn();
},
function () {
$(this).find(".tooltip_websites").stop(true).fadeOut();
});
i have this jQuery code:
$(document).ready(function () {
$("#hide").click(function () {
$("div1").hide();
});
$("#show").click(function () {
$("div1").show();
});
});
and this jsp/html
for{int=0;i<V_loopnumber;i++)
{
%>
<button id='show' height:10px>showit</button>
<div1>
something
<button id='hide' height:10px>hideit</button>
</div1>
<%
}
For example if I have 3 elements, it produces 3 divs. However,if I push the button all the divs will be showed or hided cause they got the same name.
how can I differentiate the button with the respective divs?
Your markup has a few problems. You can not assign the same ID twice. Also div1 is not a valid tag name.
Perhaps you can restructure your markup along the lines of the following example:
<div class="container">
<button class="show">showit</button>
<div class="inner">
something
<button class="hide">hideit</button>
</div>
</div>
I assigned the buttons classes instead of ids and got rid of the div1 elements.
Now you can listen for a click event on the buttons and hide the related elements using the .closest() (http://api.jquery.com/closest/) method like this:
$(".hide").click(function () {
$(this).closest(".inner").hide();
});
$(this).closest(".inner") will retrieve the the closest element with the class inner up in the dom tree.
$(".show").click(function () {
$(this).parent().find(".inner").show();
});
$(this).parent().find(".inner") will go up one level in the dom tree and find the element with the class inner.
http://jsfiddle.net/KGk7B/
First, element ids must be unique. Use a class instead. Second, <div1> isn't a valid tag. Use a div with a class instead. Third, use traversal functions to find the specific element to toggle.
$(document).ready(function () {
$(".hide").click(function () {
$(this).closest('.show-hide-container').hide();
});
$(".show").click(function () {
$(this).next('.show-hide-container').show();
});
});
for{int=0;i<V_loopnumber;i++)
{
%>
<button class='show' height:10px>showit</button>
<div class="show-hide-container">
something
<button class='hide' height:10px>hideit</button>
</div>
<%
}
id must be unique on your page, use class
<button class='show' height:10px>showit</button>
and use $(this) in event callback function instead of using selector
$(".hide").click(function(){
$(this).parent().hide(); // this is hard select of your div1, i wrote only for your html
});
IMPORTANT: Use div instead of div1, div1 tag is undefined.