I have a site in which there is a show more button which is attached to the following JQuery code:
jQuery(function($){
$("#experience a").bind("click touchstart", function() {
$("#experience p").css('display','block');
});
});
Some visual aid:
The button you see changes the display value of some p tags to display block.
So the p tags start as display:none; and are given style="display:block;"
As you can see the text extends and pushes the whole section down.
Occasionally this happens:
The only element I can see that is maybe an issue are some empty p tags but would this really cause text to just overgrow its' natural container.
Related
I am using a database to create divs and then naming them from a field in a database.
Within this div is a "delete" link that I'd like to be able to create a div below the original div with a message such as "are you sure you want to delete this?"
But my issue comes to when the database has to generate more than one of these original divs, meaning that the "delete" link will be used more than once in different places or the different divs.
I am unsure on how to create a Javascript/jQuery script where it would:
1. check what the ID of the parent div is (div#parent -> ul -> li -> a).
2. generate a new div below the parent div (not inside).
3. once an option is selected, remove the generated div.
Heres an example of the layout that I'd like to work with:
link to image
As you can see, the generated jQuery div would be outside of the parent div it also has the id of the parent div with "_delete" added onto the end. The functions are there as an example for naming the functions...
Would this be possible?
EDIT - I have gotten it somewhat working, now the issue is when it creates the extra div it doesn't stop you from making more than one... How can I limit this?
What I have done so far
function action() {
var visable = false;
if(visable==false) {
$("#foo").append('
<div id="action_foo" class="action-warn center">
Are you sure you want to delete "<span>foo</span>"?
Yes / No
</div>
')
visable = true;
} else if(visable==true) {}
}
Yes it is possible.
$('#foo_delete').sibling('#parent') will allow you to select "parent".
http://api.jquery.com/siblings/
Try using insertAfter.
http://api.jquery.com/insertafter/
You can remove generated div also with sibling.
Try calling $('#parent').sibling('#foo_delete').remove() on parent's delete anchor.
Try this:
$(document).ready(function(){
$('#foo ul li.right').click(function(){
var _parent = $(this).parent(), // gets immediate parent which is ul
_gparent = _parent.parent(); // gets grandparent which is #foo
$('<div id="foo_delete" class="action-warn center">-Delete Warning Text-</div>').insertAfter(_gparent); // insertAfter(); puts the content right after _gparent.
});
$('#foo_delete a').click(function(){
$('#foo_delete').remove();
});
});
Here is the code: http://jsfiddle.net/celiostat/NCPv9/
the 2 Jquery plugin enables to change (and set):
- background color of div to gray
- text color to red.
Problem is I have to exactly point the mouse exactly ON the text so that text changes color too.
I would like to change background Div color AND text by clicking -- anywhere -- in the div
Tried various combination from other post..but nothing worked.
(ideally I would also like to change picture at the same time !)
$(".item_unselected").on("click", function() {
$(this).toggleClass("gray_cliked_box");
$(".item_unselected").not(this).removeClass("gray_cliked_box");
});
$(".item_text_in_menubar").on("click", function() {
$(this).toggleClass("blue_cliked_text");
$(".item_text_in_menubar").not(this).removeClass("blue_cliked_text");
});
You're fairly close, but the reason you have to click on the text is because you're only setting the class for the text once you click on it - you never set it from when you click on the div. Thankfully, you can optimize (and fix) your code by only having one event. If you click on a div, you simply set both items.
You can do this using the find method in jQuery to find the span that you want to modify when clicking on the div. The updated JS is as follows:
$(".item_unselected").on("click", function () {
$(".item_unselected").removeClass("gray_cliked_box");
$(".item_text_in_menubar").removeClass("blue_cliked_text");
var $this = $(this);
$this.addClass("gray_cliked_box");
$this.find(".item_text_in_menubar").addClass("blue_cliked_text");
});
Updated Fiddle: http://jsfiddle.net/NCPv9/3/
What this actually does, is remove the class from all the objects, and then just simply add the classes back to the ones you want. You also don't have to use toggleClass. You know you're adding it so just use addClass.
This is a CSS problem, not a jquery problem. I updated your last CSS selector to:
.gray_cliked_box .item_text_in_menubar { /*for jquery*/
color: red;
}
and the text changes to red when clicked.
The added selector says that children of .gray_clicked_box with a class .item_text_in_menubar should be red. This supercedes other definitions of .item_text_in_menubar because it's a more specific selector.
http://jsfiddle.net/NCPv9/4/
I have multiple instances of a button element:
<div id="openambiance" class="openclose leftside"></div>
<div id="opendesign" class="openclose rightside"></div>
<div id="openperform" class="openclose leftside"></div>
They carry different ID's, as clicking on each of them opens different panel. I would like currently open panel to switch its open/close button background, as per definition in .openclose-active. Reality however is, they are all getting affected. My initial code looked like this and I quickly realised why they are all getting affected:
$(document).ready(function() {
$("#openambiance").click(function(e){
$("#hiddenambiance").slideToggle(600,"easeInOutQuint");
$(".openclose").toggleClass("openclose-active");
});
});
So I tried targeting specific elements:
$(this).find(".openclose").toggleClass( "openclose-active" );
That failed, so I went on to .siblings, .next and .parent, but with no luck. They are still either all switched or only previous instances get switched. I'm lost :(
this is the element you are looking for
$(document).ready(function() {
$("#openambiance").click(function(e){
$("#hiddenambiance").slideToggle(600,"easeInOutQuint");
$(this).toggleClass("openclose-active openclose");
});
});
You are clicking on the button which has the class openclose, so you need to toggle the class for this element not for any of its descendants
I originally couldn't think of a way to append an additional class to an li element which had a class that other li elements had. I wanted to only add a class to that specific li element that I clicked a select button on and the solution was "On the click of the button, you can use .closest() to find the ancestor li element". The solution was a jquery solution and it works fine but now I'm having an additional problem. First, here's what I originally posted and the solution I was given along with the fiddle and then I will explain what my new problem is and would appreciate the help. So my original post:
"Ok so my script allows me to input text in a textarea element and add it to a li element within an ordered list with the id "Glist". Not only is text added to each li I add to the ordered list, but the additional things below are added as well and they all just display additional images using CSS. One of the classes, "Selimg" displays a sprite image of a button that says "select". Now each li element I add to my ol has all of the elements below as well as the classes. So each li element will have a div with a "Selimg" class that displays an image of a button that says select for example. When I click this div with the class Selimg, a new class named "Selected" will be added to the div which will change the background color of the li to indicate that it has been selected. The problem is, I want to only add the "Selected" class to the div with the Selimg class that I've clicked, not all li elements with "Selimg" classes. How can I do that with an onclick event handler or any other way using js or jquery? Here's the html:
<ol id="GList">
<li class="MyList">
<p class="bulletp"></p>
<!--This Selimg class displays an image of a button that says select-->
<div class="Selimg"></div>
<!--When a user presses this select button, I want to append a class only to the specific li element the user has pressed the select button on. -->
<div class="edit1"></div>
<div class="Del"></div>
<div class="progress"></div>
<div class="ShowMore"></div>
<div class="CheckedGoal"></div>
<div class="PCompetePercent"></div>
<div class="ShowMoreBlock"></div>
<div class="goalTxt"></div>
</li>
</ol>
The solution I was given:
"On the click of the button, you can use .closest() to find the ancestor li element"
$('.Selimg').click( function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
here's the fiddle demonstrating the solution: http://jsfiddle.net/arunpjohny/fSMDv/2/
And now for the new issue. For some reason, the jquery solution was not working on it's own. Somehow, the jquery code above only worked when I placed it into a js function like this:
<script>
function runSel() {
var $li = $('.Selimg').closest('li').addClass('liselected');
$li.siblings().removeClass('liselected');
}
</script>
I also have a function that's called whenever I want to add another item to the list.
//This is only the part of the code that creates the div that I style to look like and be used as a button that says select. There's more code that also creates the li element itself and a few additional things but all for design. Nothing important.
var Selimg = document.createElement('div');
Selimg.setAttribute("class", "Selimg");
Selimg.setAttribute("onclick", "runSel();");
entry.appendChild(Selimg);
What this does is, create the div with the class "Selimg" which will be an image of a select button added to my list item and then it's given the onclick attribute that calls the runSel() function above as you can see. It works. However it only works once. The fiddle example demonstrates what I'm looking for. So now, when I add an item to the list, and click the select button on it, the function "runSel" is called which adds a class called "liselected" and liselected just changes the background color because the rules for each property in the css, have "!important" so the background color overrides the current one. It works, but like I said it only works once. After I add another item, and press the Select button on that one (which is made from the styles from the Selimg class), the liselected class is removed from the other li element yet the second li element that I just clicked the select button on, only causes the liselected class to be removed from the first but it's not added after that to the second li item, the current one. So, when i add multiple li, they will contain things like text and a div styled to look like a button that says "select" and so when I click "select" on an li, I want then for that specific li to have the liselected class appended and when I select the "select" button on another li, I want the class liselected to be removed from the other li element it was on and added to that one.
The jQuery solution will work fine... the problem is you are dealing with dynamically created elements... so need to use event delegation
$(document).on('click', '.Selimg', function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
Also from what I understand you have not added the script in a dom ready handler
Demo: Fiddle
Not sure why you have written a book for such a small issue. I mean, I got tired of reading what you wrote after the first 30 lines of not getting to the point of the question.
Use: $(this).parent('li').addClass("...") instead.
jsFiddle
I have a form which is divided into parts seperated by divs eg:
<form>
<div>
Account Details
</div>
<div>
Personal Details
</div>
<div>
...etctec
</div>
</form>
I want that when someone highlights or focuses on any element within the divs the div in question is highlighted using css. Consider the fact that I have applied a number of handlers to certain input elements on this form.
You could try:
$('input').focus(
function(){
// adds the 'highlight' class to the parent
$(this).closest('div').addClass('highlight');
});
With:
$('input').blur(
function(){
// removes the 'highlight' class from the parent so only one highlight is ever visible.
$(this).closest('div').removeClass('highlight');
});
And define the highlight class in CSS:
.highlight {
background-color: #ffa;
}
JS Fiddle demo, please note that, in the demo, I use fieldsets rather than div to wrap the various label and input elements, but otherwise it's exactly the same principle.
Updated the demo for increased prettiness: Revised JS Fiddle.
Edited in response to question from OP:
Thats great - however theres a little problem with this code i.e that if ever an input within a div loses focus the div is shown as unhighlighted. Is there a way so that a div remains focus until an input element in another div is focused upon which the parent of the focused div would then get highlighted
Yeah, assuming that I've understood you right, that's pretty easy:
$('input').focus(
function() {
$(this)
.closest('form')
.find('.highlight')
.removeClass('highlight');
$(this).closest('fieldset').addClass('highlight');
});
JS Fiddle demo.
$('form > div').delegate('input', 'focus', function() {
$(this).closest('div').addClass('active');
}).delegate('input', 'blur', function() {
$(this).closest('div').removeClass('active');
});
Demo: http://jsfiddle.net/ThiefMaster/fG8Au/
If you want to be sure that only the div right inside the form tag is highlighted, use $(this).closest('form > div').
Create a highlight class in your CSS and try the following jQuery:
$('input, select, textarea').focus (function ()
{
var elem = $(this), container = elem.parents ('div');
container.siblings ().removeClass ('highlight');
container.addClass ('highlight');
})
Try this:
.highlight{background:#ddd}
$('input').focus(function(){
$(this).parent().parent().find('div.highlight').removeClass('highlight');
$(this).parent().addClass('highlight');
});