I have a container div containing some html - for example:
<div id="container">
<h1>Bla bla</h1>
<div class="myItem"></div>
Send
</div>
and some css related to the container:
#container {background:red;}
#container h1 {font-size:30px;}
#container .myItem {color:red;font-size:12px;}
I would like to store all the html inside the container and all the related css to it in some variable/database/whatever is available, and then load it back on a new page. The content is dynamic and it's up to the user to style the container and it's content.
How could I accomplish this? One way I was thinking was to retrieve all this properties using javascript and than store them somehow in the database to load them back later or try to do this with html5 webstorage.
Is there any plugin that does this?
EDIT:
I've also tried html2canvas but it's support for css3 is not good enough to render the elements correctly.
If the CSS and HTML are both stored within the page, you can just grab the content (based on the wrapper) and store it in localStorage (if this works for your purpose).
An example with jQuery and localStorage... you will need to change where things are being saved from to fit your case.
jsFiddle
Saving the items:
var html = $('#container').html();
localStorage.setItem('html', html);
var css = $('#csscontainer').html();
localStorage.setItem('css', css);
Pulling/showing the items:
var showHtml = localStorage.getItem('html');
var showCss = localStorage.getItem('css');
$('#showHtml').html(showHtml);
$('#showCss').html(showCss);
Related
I'm working on my company's webpage. This is my first serious webpage and lots of doubts came at each line. Now I'm working on a News loading system, and I've one that can't solve:
I'm loading my news with jquery load, attaching elements to previously defined vars:
var newArticle = $('<div id="news-article"></div>');
var newArticleChild = newArticle.children(); //'cause i want to load articles inside #news-article, not <a></a>
var image = $('<div></div>');
var title = $("<div></div>");
var tag = $("<div></div>");
$(image).load(path + i + ".html #main-image");
$(title).load(path + i + ".html h1");
$(tag).load(path + i + ".html #tag");
$("#news").append(newArticle); //Apend articles parent to an existing page element
newArticleChild.append(image);
newArticleChild.append(title);
newArticleChild.append(tag);
HTML --------------
<div id="main-image" style="background-image: url(../../assets/images/NewsBackgroundTry.png);
"></div>
I don't really like this because it creates emty divs with another div inside, but this is not a mistake itself.
I don't really need to append image to my page, because what i want from it is it's style, that contains the path to the image in css. I'm doing this this way because I need to apply background-size: cover; style to that image.
My question is, how i can get the background-image style from image variable? I've tried lots of things and looked at as many posts as i found about it, but i can't get this value...
If the solution prevents from appending image to page, it would be much better.
Thanks everyone, Abel!
you could use var bgImg = image.css('background-image'); to get that css property and then replace the nasty url('') part to get just the image path.
I'm trying to add a span to a label for which I don't have access to the HTML as it's output from RSForms Pro. I would like to add a tooltip span to individual labels so when the person rolls their mouse over, they get some information.
Here is what the code looks like:
<p class="rsformVerticalClear"><input name="form[Services_DM][]" type="checkbox" value="Death Records Retrieval/Search" id="Services_DM0"><label for="Services_DM0">Death Records Retrieval/Search</label></p>
The next option has the class Services_DM1 and so forth.
How do I go about adding a span to "Death Records Retrieval/Search" without having access to the actual code? Is there a way to inject it?
How are you inserting the code into your page? Anything embedded (such as an Iframe) will be barred from being manipulated from (or, IIRC, accessed by) your javascript due to XSS concerns.
Assuming your html and the loaded html are rendered into the same document, you'd want to use the HTML DOM functions to manipulate the html post load. This function should do what you want:
function addToolTip(elementid, content, classname) {
var theelement=document.getElementById(elementid);
var thetooltip=document.createElement('span');
var thetext = document.createTextNode(content);
thetooltip.appendChild(thetext);
thetooltip.setAttribute('class',classname);
theelement.appendChild(thetooltip);
}
To generate a tooltip, just call addToolTip with your label's element, whatever content text you'd like to see within the tooltip, and a css class (I figured you may want this for styling).
You can target all the labels with class starting from "Services_DM" and append a span to them:
try this jQuery sample snippet.
var $span = $('<span>My span contents here </span>');
$('label[class^="Services_DM"]').each(function(index,item){
$(this).append($span);
});
The above code is not tested, for reference purpose only!
This is a really simple question, but I did not find an answer through searching.
When creating an SPA, what is the process for updating the content if you were to do it with jQuery? Is it simply deleting the contents of a node, and writing new HTML?
Here's some code to make the question clearer:
Suppose you have SPA page like this:
<div id='nav'>
<div class='link'>home</div>
<div class='link'>about</div>
...
</div>
<div id='page_content'>
...
</div>
When the user clicks on a nav item, jQuery does an HTTP get for the content: var content = .... To update the page, simply update the page with $('#page_content').html( content )?
If by SPA you mean a Single Page solution, something like this:
<!-- HTML -->
<div id = "page-area" style = "width: 800; height: 600; border: 1px solid silver"></div>
// Javascript
$('#page-area').load('your-page.html');
// or
$.get('your-page.html', function(data){
$('#page-area').html(data);
});
...if you want to load external files without refreshing the page.
Or to update element content:
var pagecontent = "<h1>New Content</h1><p>Some new content</p>";
$('#page-area').html(pagecontent);
Note that elements added to a page in this way will adopt existing styles and will clash with other elements with the same id attribute.
Depends what you;'re trying to do. You can change values of textboxes like:
$("#textBoxID").val("ValueYouWant");
You can append a table row to a table like so:
$("#tableID").append("<tr<td>blahblah</td></tr>");
You can update a div's HTML:
$("#divID").innerhtml("Hello World");
Etc, etc. Your question is pretty vague, but I hope this helps.
So, here's the problem...
I have to:
Grab a page of html via a REST API with a AJAX call,
Extract a table with a known id from that html (which, thankfully, is well-formed)
Extract the associated css for the table from a style block,
Append the table to a div on my page, and
Re-apply the original CSS
Therefore the parts of the page that I'm interested in are:
<style>
#tableid td.someclass {
...
}
#tableid td.anotherclass {
...
}
[etc etc ..]
</style>
And
<table id="tableid">
...
</table>
So, going through the list above 1,2 & 4 are no problem at all. It's 3 and 5 that are taxing the brain - there are no external stylesheets to worry about BTW, everything is in the page that I'm grabbing inside a single tag.
I guess I could extract the entire element and then append it to my page - but that is messy and could result in unwanted side-effects. What I'd like to do is just extract the styling that applies to #tableid and then apply them the table appended to my div.
Is there an elegant way to do that?
You could pull the styles from the header using a standard jQuery finder:
var styles = $('head style').text();
Then run a regular expression against it:
var tableID = 'tableid',
pattern = new RegExp('#'+ tableID + '[^}]+}', 'g'),
tableStyles = styles.match(pattern);
This should give you an array of styles for your table’s id. Now you can append these styles to your current document’s head:
$('<style/>', { text: tableStyles.join('\n') }).appendTo('head');
Your use case might require some fine–tuning, but this should approximately give you what you’re after.
Basically, i'm building a basic jquery modal plugin as practice, and as much as the many varieties out in the wild have been helpful for reference, I wasn't sure about the best method for pushing html into the modal that is being built in my jQuery.
This code is building my popups:
var container = $('<div class="container"></div>');
var header = $('<div class="modal"><div class="modal-header"></div></div>');
var content = $('<div class="modal-body"></div>');
var footer = $('<div class="modal-footer"><a class="secondary" href="#">Cancel</a><span id = "button-secondary-label">or</span><span class="green_btn"></span></div>');
$(".popup").append(container);
$(".container").append(header);
$(".modal").append(content);
$(".modal").append(footer);
In an html file that is calling the javascript file with the above code, I would like to pass html to modal-body. I know I could just write the following:
$(".modal-body").html("html goes here")
but I would like to make the plugin handle as much as possible, so what would be the best way to do the following:
in example.html:
...
<script type="text/javascript">
$(.popup).modal();
</script>
</head>
<body>
<div class="popup"><div class="body-text">I want this text in the .modal-body</div></div>
in the js file:
I would like to take the html that is in .body-text and move it into the .modal-body class, or something that will get me similar results.
Again, trying to accomplish this in the external js file, and not in example.html
It's common to use IDs (as it can be set as the href and can be used to point to the given content of a link) instead when trying to target DOm element from modal boxes. So you could do
Some content to be in the modal
Then just grab it and append it to the cmodal
$('#boo').appendTo(content);
You can also have an option so that it can be clone and left the original copy behind
$('#boo').clone().appendTo(content);
You can technically handle classes as well but after depends how your plugin is built. As you can grab all and generate a single modal content or create the multiple content to browse between using them.
$('.popup').each(function() {
$(this).appendTo(content);
});
var items = $('.popup'),
len = items.length,
cur = 0;
$next.click(function() {
cur++;
if (cur === len) cur = 0;
items.eq(cur).show();
});