i'm creating a simple html editor with jquery.
say i have this html:
<div id="content">
page 1
<div class="pageBreak"></div>
page 2
<div class="pageBreak"></div>
page 3
</div>
i want to split my content by pageBreaks to have this output:
page1 buffer: page 1
page2 buffer: <div class="pageBreak"></div>page 2
page3 buffer: <div class="pageBreak"></div>page 3
ideas?
Since your pages are not enclosed by HTML tags (which would be the DOM-friendly way of solving this problem), you will have to do your own processing of the HTML in the content div to break apart the content into your pages. Here's one way to do that using a regular expression to split that content at each of your pagebreaks.
var t = $("#content").html();
var pages = t.split(/<div\s+class\s*=\s*['"]?pageBreak["']?\s*>\s*<\/div>/i);
At this point, the pages array would have the content between each page break.
And, a working example: http://jsfiddle.net/jfriend00/wpyH2/
P.S. Note that the regular expression tries to be very general here because browsers do not always give you back the same innerHTML that you put in the page.
Related
So, I am trying to load picture from another page using Jquery .load(), now the element I am trying to load has multiple children element which also load on current page, now obviously I could hide those divs but first I want to know if there's way to only grab parent div and leave out children.
I have tried using parent() method but since .load() works differently, it didn't work as intended. (Unless I missed something)
$('#myNewDiv').load('/robots .heading-image');
Here's HTML code from the other page
<div class="heading-image" style="background-image:url(imagelinkhere.png)">
<div class="heading-image_cover">
<div class="left">
<div class="heading-image title">Heading Title</div>
<div class="heading-image desc">I am a desc</div>
</div>
<div class="right">
<div class="heading-image stat">Stat text</div>
</div>
</div>
</div>
That's the code I am using right now, but .heading-image has multiple child elements as mentioned above.
To sum up, I need to load only parent element and ignore all child elements of the div mentioned above without having to load those children on current page and hide them (If possible)
From what I understand, your goal seems to be to copy the empty div to a new page, while maintaining the background image associated with the <div> tag.
The simplest approach would be to add to a stylesheet in which both of the pages can reach. For example:
CSS
.heading-image{
background-image:url(imagelinkhere.png);
}
JavaScript
$('#myNewDiv').html("<div class="heading-image"></div>");
Then in the head of both HTML documents, have <link rel="stylesheet" href="style.css"> to point towards the correct stylesheet for both pages.
If you just want the empty <div class="heading-image"></div> you could use the load() complete callback to empty it:
$('#myNewDiv').load('/robots .heading-image', function(){
// new html exists in page now, 'this' is #myNewDiv element
$(this).find('.heading-image').empty();
});
If there are resources inside that element like images, videos etc that you don't want to load in page you could also parse the :
$.get('/robots').then(function(html){
var $hImage = $(html).find('.heading-image').empty();
$('#myNewDiv').html($hImage)
});
With all that said I don't see why you need to extract an empty element from another page and can't just do:
$('#myNewDiv').html('<div class="heading-image"></div>')
I need help creating a pure JavaScript event listener that captures all clicks on a page, gets the link text/URL, find the logical parent DIV of that link and concatenate the values together. Take this example code:
<body>
<div class="heading grid-12">
<!-- Header and navigation links -->
Summer Promotion
</div>
<div class="responsiveGrid">
<!-- page body -->
<img alt="Navy Sweater" src="nsweater.jpg"/>
</div>
<div class="footer grid-12">
<!-- Footer and bottom nav links -->
About Us
</div>
</body>
In the above example, I want to capture where the link logically sits on the page, either header|body|footer based on whether the link is a child of these three top level DIVs. Next, I want to capture the link text from anchor/JavaScript links or the Alt Text from image links. Finally I want to get the path of the link – excluding the protocol, domain and query strings if an anchor link or converted to a static string “Overlay” if the href is ‘# ‘or ‘javascript:void(0);’. Using the code above, I’d want the final concatenated string sent to console.log when any link is clicked:
'header|Summer Promotion|index.html'
'body|Navy Sweater|/cart/sweaters/navy.html'
'footer|About Us|Overlay'
Thanks in advance for your assistance.
I am trying to understand why my white-space disappears when switching my code to javascript.
This is with static html JSFiddle Basic
And here the "same" in javascript JSFiddle JavaScript
when I set font-size:0px; in css for the static html I get the same result as in javascript. I am just not sure why this is happening and would like to understand it. What is javascript doing differently to html/CSS?
Thanks in advance!
I would say it's because javascript appends each section just after the closing tag of a previous section, leaving no space between previous section closing tag and next section opening tag.
HTML version:
<section>
<!-- content -->
</section>
<section>
<!-- content -->
</section>
JS version:
<section><!-- content --></section><section><!-- content --></section>
This is because in the basic html you have new lines separating the section elements:
<section class="pic"></section>
<section class="pic"></section>
In the approach with JavaScript they are glued together on one line:
<section class="pic"></section><section class="pic">
You can read this to update your knowledge for how to avoid the spacing between the inline-blocks:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
So this is actually a very tricky concept to portray so here is my attempt.
I am utilizing an HTML form template in LANDesk Service Desk - tool is irrelevant but important to note that there is back-end code that I cannot touch that is generating HTML.
So basically, the tool is pulling data from a back-end database containing a list of objects. It then inputs this data into an HTML form template that I have created using variables as placeholders for the objects. The HTML is then built on the fly with however many objects are in the database. Thus, I have no way of accessing the head - (which means native JS, and inline CSS).
My template looks like this...
<div class="my-template">
<a class="my-template my-link">My Link</a>
</div>
<script>
var myLinks = document.getElementsByClassName('my-link');
for (var i = 0 ; i < myLinks.length ; i++) {
myLinks[i].style.display = "none";
}
</script>
When I view the source on the loaded page it looks something like this...
<body>
<!--misc. page stuff-->
<!--First Item-->
<div class="auto-create">
<div class="my-template">
<a class="my-template my-link">My-Link</a>
</div>
</div>
<!--Second Item-->
<div class="auto-create">
<div class="my-template">
<a class="my-template my-link">My-Link</a>
</div>
</div>
</body>
All of the elements are formatted the way I want them to be...besides the last element on each page. I have determined that this is because each time the tool is running the object through the template, it is running the script. The issue is, there is a stupid default button that they place at the bottom of each object that is broken. (This is why I have the script changing the style to display: none..should have mentioned this earlier). Basically I want to delay the execution of the script until not only the object has been run through the template...but the entire page has loaded...but I can't seem to get the last button to go away.
I know that this is a lot of poorly written words trying to form an explanation, but I really think this is impossible...but I am convinced there has to be a way. (Also, the company isn't providing us with any help in finding a workaround, so I had to basically MacGyver this one
I would like to insert a couple of opening DIV tags after the H1 element on a page, without inserting the corresponding closing tags (since the closing tags are contained in an included footer file which I don't have access to).
i.e.
Existing code:
<body>
<h1>Heading One</h1>
... page content...
</div>
</div>
</body>
New code:
<body>
<h1>Heading One</h1>
<div id="foo">
<div id="baa">
... page content...
</div>
</div>
</body>
DOM methods insert the div as a complete (closed) element, 'createTextNode' inserts escaped characters and 'innerHTML' needs an element to insert into. Have even tried to insert a script element with document.write without any luck.
Any ideas (jQuery would be fine)?
Update
The following worked:
document.body.innerHTML = document.body.innerHTML.replace('</h1>','</h1><div id="foo"><div id="baa">')
As pointed out by Asad the solution (which now seems obvious of course) is to use string methods on the HTML rather than DOM methods.
If you're dealing with DOM manipulation, use DOM manipulation methods. If you're dealing with HTML manipulation, use string manipulation methods.
h1.parentElement.innerHTML = h1.parentElement.innerHTML.replace("<h1>Heading One</h1>","<h1>Heading One</h1><div><div>");
i think this will answer your question, it is all about valid XML formation.
http://www.w3schools.com/xml/xml_syntax.asp
Forget DOM methods, insert it as a string using .replace().
Your approach is fundamentally wrong. The browser parses the DOM as it sees it, and automatically closes any tags that ought to be closed. It's impossible to use JavaScript to insert only the opening tag.
You say "the closing tags are contained in an included footer file which I don't have access to." Closed tags that haven't been opened are ignored, so as far as the DOM parser is concerned, those closing tags don't exist.
Your solution is either:
Put the opening tags in a header, or somewhere else on the server-side, or
Use JavaScript to grab ALL the following DOM elements, including the footer, and .wrap() them all in the desired divs.
This kind of practice seems a bit unorthodox, but perhaps something like this would help.
Existing HTML
<h1 id="testH1">Test H1</h1>
<div id="existingDiv">
<div id="existingDivContent">Existing Div Content</div>
</div>
New HTML
<h1 id="testH1">Test H1</h1>
<div id="newDiv">
<div id="existingDiv">
<div id="existingDivContent">Existing Div Content</div>
</div>
</div>
JS
The javascript is fairly rudimentary, but I think the concept can be applied to safely and properly achieve your goal.
$(document).ready(function() {
//-- parent node you wish to copy
var existingDiv = $('#existingDiv');
//-- new parent div node
var newDiv = $('<div id="newDiv">');
//-- where we want to insert the new parent node
var testH1 = $('#testH1');
//-- stuff our previous parent node into our new parent node
newDiv.html(existingDiv);
//-- insert into the DOM
testH1.after(newDiv);
});
http://jsfiddle.net/8qzvN/