I have a div (let's call it potatoes) that I want to appear inside another div (food). The typical way to do this would be:
$("#food").html ( $("#potatoes").html());
However this doesn't accomplish what I want. Instead of using the actual "potatoes" div, jQuery seems to be copying that content into the food div, where the original content still exist in the browser.
I want the ACTUAL div (potatoes) to disappear from its place and to appear in the container div (food) without having to do perform .hide() ... or similar methods.
Reason why? I have selectors that enable and disable buttons in the potatoes div, and they seem to trigger the original potatoes div content, but NOT the duplicate that has been loaded into the food div.
Does that make sense? Can anyone give insight as to why this is and what I should do?
Side note:
$(document).on('click','#button-loaded-with-page', {} ,function(e){
this.disabled = true;
$('#button-inside-potatoes-div').hide();
});
The above example is what I would like to achieve, but does NOT hide the button when the potatoes content has been loaded into food by the .html() method. Instead it hides the original button on the page, and not the duplicated one.
What I am trying to achieve: https://jsfiddle.net/o9kshscj/6/
You can just pass the object to html()
$("#a").html($("#b"));
Demo: Fiddle
You could use append to change the parent. This will move the #potatoes object out of it's current DOM position, into the #food div as a child
$("#food").append($("#potatoes"));
You can just remove the div after replacing like this:
$("#a").html($("#b").html());
$("#b").remove();
$("#button-to-enable").prop("disabled", false);
Related
I am kinda new to Javascript/JQuery programming and I have a simple question.
What I am trying to accomplish is making a 450 x 350px popup that shows on a 2 second delay. I think I have the structure down on how to make it delay and show up.
My real question is how do I add custom content to that popup box? Would I add my content in a div with an ID and then reference that ID in the JQuery code to make it pop up?
I'm just not sure where to go with this.
Let me know!
Thanks.
Say you have a <div id="one" class="js-one"></div>. You can change text content w/ jQuery using the id $('#one').text("Hello") or the class $('.js-one').text("Hello"); note that using the class will update all elements w/ that class. If your custom content includes HTML then you'll want to use jQuery's html method instead of text.
See: http://api.jquery.com/text/ and the docs for .html()
To show/hide the styled div, see: http://api.jquery.com/toggle/ and the docs for .show() and .hide().
In my example here:
Example
JS
$('button').on('click', showHide);
$('.overlay').on('click', showHide);
function showHide(){
$('.scroll-container').toggleClass('show');
$('.content-container').toggleClass('no-scroll');
$('.overlay').toggleClass('opacity');
}
you have a basic body with text. A clickable element (in this case a 'button') causes a scrollable container to appear and 'hover' over the original body, which can be hidden again by clicking outside of this container.
I'm not very good at JavaScript and with this example I was helped by a friend. The thing I'm struggling with now is that I need multiple different clickable elements, displaying a similar scrolling container, but with different content.
I'm doing this for a portfolio website, so imagine a bunch of photos on a page, which when clicked result in a body hovering over the original content, further elaborating the clicked project.
Do I create multiple id's for each project, together with multiple scrolling container id's, and just copy the JavaScript a couple of times?
I hope this makes sense and I hope someone is capable of explaining to me how I'm able to create the proposed effect.
First of all, you have to make a connection between buttons and containers that should be opened. One way is to use their indexes, so that when first button is clicked, first container would open. You can use this reference of the clicked object inside your function, in order to get its index. Like this:
$(this).index()
Then, you have to select all the elements with scroll_container class $('.scroll-container') and reduce the set of matched elements to the one by passing index of the clicked element to .eq() method .eq($(this).index()). Finally, you have to add show class to it addClass('show').
And because the logic is changed, you have to separate actions done on button and .overlay click events. They do not make a reverse action now, so they are not "togglers" anymore.
http://codepen.io/anon/pen/LpWwJL
$('button').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).index()).addClass('show');
$('.content-container').addClass('no-scroll');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.content-container').removeClass('no-scroll');
$('.overlay').removeClass('opacity');
}
UPDATE
One thing you should keep in mind regarding $(this).index() method.
As it is written here:
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
That means that trigger elements should have common parent in order to maintain our logic.
In cases like this: https://stackoverflow.com/posts/32946956/edit, elements that are triggering scroll_container appearance, have different parent nodes (they are placed in 3 different divs). So, if we will call index() method for each of them, it will return '0' because they are the first and the only elements in their parent nodes.
Actually it means that you have to get the order of their parent elements, not theirs own. This can be achieved by using parent() method before index():
$(this).parent().index()
Here is updated codepen.
If I were you, I would implement a generic function to display a different content using the same function based in the button. So for that we will need something to relational the click with the content for that we can set a value in out button:
<button data-id="1">Click me 1!</button>
<button data-id="2">Click me 2!</button>
so out when we click the button we should get the value to send it to our function:
$('button').on('click', function(){
var dataButtonValue = $(this).data('id');
});
Then we can match it with the content using for example data-content-id
<div class="content" data-content-id="1">your wording</div>
<div class="content" data-content-id="2">your wording</div>
With all that we can manage what content we want to show depends on the click.
function showHide(id){
$('.content[data-content-id="' + id + '"]').toggleClass('show');
}
DEMO
I hope it's helps.
I have an iFrame in a html page myPage.html where I am displaying another page otherPage.html. otherPage.html is a complicated page with many elements. I want to display only one div in the iFrame. All the others should remain hidden. How can I do this?
Instead of the iFrame, I tried to use the .load() function in jQuery. But for some reason, the page does not load. The otherPage.html is served from an IIS server and the page is constructed from purely Javascript. I have no idea why nothing is loading when I use the load() function.
How would I go about achieving this?
Update:
Here are some clarifications:
I tried to use the .load() function on myPage.html. Anyway, after fiddling around, I found the following to work:
For the div that I want to show, I hide all its siblings and also hide all the siblings of its parent. The following jQuery statement seems to do this:
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
I have only one issue now. When I do the following:
Load myPage.html in Firefox (It also loads otherPage.html in an
Iframe)
Manually open firebug and type
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
it seems to hide everything else.
But then I want to automate it. In other words, when I load myPage.html I want it to load the contents of the iFrame. Once the iFrame contents are loaded I want to then run this script:
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
I cannot get this to work. I have tried these two approaches so far:
$(document).ready(function() {
$("#myFrame").ready(function () {
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
});
});
I have also tried to use
$("#myFrame").load(function () {
instead. But in both these cases the script does not hide the other elements. Since, the script works when I use it manually in the console, I assume that somehow it is running before all the elements are loaded. Please give me your thoughts.
Hide everything within the iFrame by something like $("#myIFrame *").hide(); or you can set the css display property to none.
Using CSS selector, re-display only the div you want. If your div has an id this is pretty easy : $('#myDiv').show();
If the div does not have an id, see if you can give it one. If creating an id for your div is not an option, try to give its parent an id/class.
If ID is not an option you may also find selectors like :nth-child() useful.
You say you are using the load() function. Are you using this in the parent page or the iframe page? Do you really mean to use the ready() function instead?
$(document).ready(function(){
// some code here ...
});
Using ready() on the document will ensure that the DOM elements have completely loaded, and then will execute the code in the handler. Without more information I'm not sure I can help much with what you're trying here.
Using an iframe you should first remember that if you want only one div to be visible and all others to be hidden you must make sure that the "visible" div is not inside an "invisible" container. If the container is hidden, all children will be hidden too.
If you had a div "showme", then something like this would work:
<div id="showme">visible text</div>
<div style="display:none;">hidden text</div>
But doing it this way, everything would be hidden:
<div style="display:none;">
hidden text
<div id="showme">supposed to be visible, but hidden!!</div>
</div>
If you are changing the visibility, or display, of an element you can do it in the iframe page like this:
// using jQuery...
// set the display css to an empty string, defaulting to visible (not 'none')
$('#showme').css('display','');
// set other elements to be hidden...
$('#hideme1').css('display','none');
$('#hideme2').css('display','none');
$('#hideme3').css('display','none');
If you want to change the visibility of elements from the PARENT page you first access the iframe, then change the elements within it:
// using jQuery...
// get the iframe. ps. you dont have to put the $ in front of the variable name.
// I chose to do it this way to remind myself it's a jQuery object.
var $f = $('#myiframe').contents();
// set the display css to an empty string, defaulting to visible (not 'none')
$f.find('#showme').css('display','');
// set other elements to be hidden...
$f.find('#hideme1').css('display','none');
$f.find('#hideme2').css('display','none');
$f.find('#hideme3').css('display','none');
See this article for example(s) on working with elements in a child iframe:
http://www.computerhowtoguy.com/jquery-and-iframes/
As I understood your question. You can do like this, pass div id to get displayed as hash in your otherPage.html url like you have a div with id first, you can pass first as hash
<iframe src="otherPage.html#first" />
and in otherPage.html, you can get this hash and according to that show your div, but make first all your sections hidden, using css will be easy, only add "display:none;" in css.
and try this : in otherPage.html
$(function(){
//var divToShow = location.hash.subString(1);
//$('#'+divToShow).show();
var divToShow = location.hash;
$(divToShow).show();
});
I have two custom dropdown lists that have the same markup. I need to have only one show at a time. Right now, I'm able to open both at the same time. Both should also close when I click off the list.
The same markup for both lists is required, so I can't use unique ID's or additional classes to make this happen.
Here is a link to my fiddle example: http://jsfiddle.net/dg7Lc/29/
Any help would be greatly appreciated, thanks!
-D
Consider adding a data attribute such as 'active' via jquery when you click on one of them, then hide all those that have that attribute.
$('.custom-select').eq(0).hide() will hide the first one.
Use .show() instead of .hide() to show (obviously) and change the index to (1) to get the second one.
First thought would be if you could wrap a span or div around either or both and use that to get around the "same markup" limitation. Other than that, though, I'd suggest using order in page - use .next() and .prev() to get between them, and something like
$("div.custom-select").get(0)
or
$("div.custom-select").get(1)
to select them from outside.
edit: if you can run them off of something like an onmouseover, onchange, or whatnot, it's even easier - the one that's changing will be passed into the function as the "this" parameter. Just hide both, and show this, or show both and hide this.
edit2: similarly, once you have one of them hidden properly - well, that one will be hidden, and respond to the ":hidden" selector. Use that to distinguish between them (and save the distinction as a jquery variable) before you go showing or hiding anything else
Hide the first:
$('.custom-select').first().hide();
Hide the second:
$('.custom-select').last().hide();
And then put these lines of code where needed.
http://jsfiddle.net/dg7Lc/31/
Basically, closing the others:
$('.custom-select').not(this).find('ul').slideUp('fast');
And for closing when clicking outside the box, I used this piece of code but it's a bit dirty:
$("body").click(function(e) {
var should = true;
for($e = $(e.target); should && $e.length; $e = $e.parent()) {
should = !$e.is(".custom-select");
}
if(should) {
$('.custom-select').find('ul').slideUp('fast');
}
});
You can bind a click to the document, that looks to see if they clicked on the custom-select or the document outside it and hides any open lists as it should:
$(document).click(function(ev){
if(!$(ev.target).is('.custom-select span')){ $('.custom-select').find('ul').slideUp('fast'); }
});
Updated JSFiddle
I have a small problem, I have some static content inside a div and I need to add some extra content to it, prependTo works good, but the new content comes after the exisiting one.
appendTo comes before the exisiting content, but each new appended content comes before the previous append.
Hard to explain, so I added a little example here:
http://jsfiddle.net/9j958/
The foo# order is wrong, as you can see. Any way around this?
Reverse the elements before the each call.
$($('tr').get().reverse()).each(
...
);
I'd have two suggestions.
The easier would be to add a empty div to the beginning of your fieldset and append your new elements to that instead of the fieldset directly: http://jsfiddle.net/9j958/9/
Or if for some reason you can't or don't want to change your HTML, then you could keep a reference to the last element you added and append the next element with insertAfter: http://jsfiddle.net/9j958/10/