Using Jquery 1.7.1
I have two divs
<div class="highlightStart"></div>
{page content here}
<div class="highlightEnd"></div>
Those show up in the page source. But this jquery I added at the bottom of the page is not working:
<script type="text/javascript" id="makeHighlight">
$(document).ready(function () {
$("div.highlightStart").replaceWith("<section class='highlight'>");
$("div.highlightEnd").replaceWith("</section>");
});
</script>
No javascript errors showing in the browser console (Chrome). Just nothing gets replaced.
First i want to site that you're a producing an incorrect structure of DOM. If your script will run it will looks like this:
<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div>
and this is not a good structure if you want have:
<section>
{page content here}
</section>
Should be something like this:
Your DOM:
<div id="content">
{page content here}
</div>
And in your script:
$(document).ready(function () {
content = $('#content').text();
$('#content').html($('<section>').text(content));
});
Please see myfiddle for reference
The replaceWith method expects entire elements, not tags. You'll need to wrap your page contents with a new element, then remove the two original divs.
Update: This might get you close:
$(document).ready(function () {
$('.highlightStart').nextUntil('.highlightEnd').andSelf()
.wrap('<section class="highlight"></section>');
$('.highlightStart, .hightlightEnd').remove();
});
http://jsfiddle.net/isherwood/H36UE
Something's off a bit with this, but I'm out of time. Good luck.
Based on help from isherwood, used this as the solution:
http://jsfiddle.net/H36UE/1/
With HTML tree like this:
<div><div><div class="highlightStart">highlightStart</div></div></div>
<div>Outside<div>Content to Highlight</div>More</div>
<div>second</div>
<div>third</div>
<div><div><div class="highlightEnd">highlightEnd</div></div></div>
This Javascript:
$(document).ready(function () {
$('.highlightStart').parent().parent().replaceWith("<div class='highlightStart'>");
$('.highlightEnd').parent().parent().replaceWith("<div class='highlightEnd'>");
$('.highlightStart').nextUntil('.highlightEnd').andSelf().wrapAll("<section class='highlight'>");
$('.highlightStart, .highlightEnd').remove();
});
Related
Description: I am trying to fadeIn() my container using jquery, but it doesn't work. I'm kinda new to it, only fresh out of codeacademy jquery course.
Problem: the method I wrote in myScript.js file doesn't seem to work. The syntax looks to be ok compared to other examples. I got my js file linked to the html file like this:
<script type="text/javascript" src="/Content/js/myScript.js"></script>
This is my index.cshtml file where I created a container for some navigation:
<div class="container" id="fade">
//some other buttons, divs, etc
</div>
This is my custom js file that I included:
$(document).ready(function () {
$('#fade').fadeIn('slow');
});
You should hide the div by default if you want to fade it in, otherwise it is already showing and fading in won't do anything. If that's the case, your html should look like this:
<div class="container" id="fade" style="display: none;">
//some other buttons, divs, etc
</div>
Make sure your #fade element is hidden when the page loads.
HTML
<div class="container" id="fade">
//some other buttons, divs, etc
</div>
CSS
#fade { display: none }
JS
$(document).ready(function () {
$('#fade').fadeIn('slow');
});
This is div which loads elements at rum time.
<div class="name" id="projct_name"></div>
after loading elements its becomes:-
<div id="projct_name" class="name">
<div>
<span >Proof testers</span>
</div>
</div>
I want the value of span.
$(document).ready(function() {
var prodct_name=$('#projct_name').find('div').find('span').html();
alert(prodct_name);
});
Each time page load get the alert null value because elements loads after alert.
I want to delay my js code so that all elements of page loads before my code run. It can be possible??
Try the below code:-
function pageLoadCompelet(){
var prodct_name=$('#projct_name').find('div').find('span').html();
alert(prodct_name);
}
And call this function on window.onload :-
window.onload=pageLoadCompelet;
I think Jquery Initialize will solve your issue.
Step 1: Insert this in the head-section of your page:
<script src="https://raw.githubusercontent.com/AdamPietrasiak/jquery.initialize/master/jquery.initialize.js"></script>
Step 2: Place the following javascript below or above the other code you already tried:
$("#projct_name span").initialize( function(){
alert($(this).html());
});
The plugin uses MutationObserver which is a really robust way of handling DOM changes.
In a html web page, i load in my main section the content of another html page. I have a js script section at the botton of my charged page. I use jquery.
<div id="main">
</div>
Other page
<div>
...
<div id="roomCheckoutResult" class="hide">
...
</div>
</div>
<script>
$('#dateRoomCheckout').datetimepicker({
format: 'DD/MM/YYYY'
});
$("roomCheckoutResult").show();
</script>
Line with function show don't work. If i use directly
document.getElementById("roomCheckoutResult").className="";
that work.
So why my line with show don't work.
You need to change this:
$("roomCheckoutResult").show();
to this:
$("#roomCheckoutResult").show();
You target an id value by using a # at the start of the selector.
And, it goes without saying that you have to make sure that jQuery is loaded before using it.
my concept is to load html file from one to another one. The image below could explain better.For example, I have no1.html, no2.html,no3.html, no4.html ... and they share one JavaScript file, all html files have its own contents.
first HTML file no1.html loads no2.html, my javascript is for no1.html like, $('#element').load('no2.html #content'); then no2.html js is like $('#element').load('no3.html #content');
if all files just share one javascript file is unable to load html pages continuously, is there a way to make html loads another html continuously ?
I guess what you would like to do is something like this:
my.js
$(function() {
// delegate click event to ajax content
$("body").on("click",".load_button",function() {
$(this).hide(); // hide this button
var area_name = $(this).data("area");
var next_file = $(this).data("next");
$("#"+area_name).load(next_file);
});
});
no1.html
<script src="my.js"></script>
This is No.1
.....
<div id="area_2">no2 will be here</div>
<div class="load_button" data-area="area_2" data-next="no2.html">Click</div>
no2.html
This is No.2
.....
<div id="area_3">no3 will be here</div>
<div class="load_button" data-area="area_3" data-next="no3.html">Click</div>
no3.html
This is No.3
.....
<div id="area_4">no4 will be here</div>
<div class="load_button" data-area="area_4" data-next="no4.html">Click</div>
In this example, my.js is included only once in no1.html.
Hope this helps.
1.You are trying to load the content of the html file in single element.
You might want to use a callback function
$('#element').load('no3.html #content' ,function(){
// Loading done.. what next?
})
I just figured out how to use Facebox. I can open hidden divs in Facebox but how do I get it to dump the current div and load another one without closing the pop-up? I want the Facebox pop-up to load another div (while dumping the previous one) if the user clicks on a link inside the pop-up. I already tried something like this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({})
})
</script>
Div1
<div id="div1" style="display:none;">
Load the other div
</div>
<div id="div2" style="display:none;">
<p>Other div</p>
</div>
I somehow knew it wasn't this simple. I already tried searching the net for answers but no dice. Is this even possible? I'm a complete noob when it comes to Javascript so please bear with me.
I found the answer already. Apparently, you need to bind it to a mouseclick event and perform recursion. Here's how I did it:
<script type="text/javascript">
function find_hidden(){
$('.infinite')
.unbind('click')
.bind('click', function() {
var glink = $(this).attr('href');
jQuery.facebox({div: glink});
find_hidden();
});
}
</script>
I found the answer here.
From skimming through the source, I think you can just pass a string, like this:
$.facebox('<div>test</div>');
Try this:
jQuery("#facebox_overlay").click();jQuery.facebox({ div: '#your-new-div-id' });