Let's say that I have two html pages that are identically designed, but have different content. I have the same div with the same id on both pages. How do I use jQuery.load (or what do I use) so that the div#conent does not get added into the div#content of the first page.
I've tried this:
$(document).ready(function(){
$("a#linkHome").click(function(){$("div#content").load('index.htm #content');});
$("a#linkPage2").click(function(){$("div#content").load('page2.htm #content');});
});
... but it ends up adding another div to the already existing div!
<div id="content">
<div id="content">
Blah Blah Blah
<div id="content">
</div>
Try with:
$(document).ready(function(){
$("a#linkHome").click(function(){$("div#content").load('index.htm #content *');});
$("a#linkPage2").click(function(){$("div#content").load('page2.htm #content *');});
});
in this way you get all elements inside the div#content but not the div itself.
Or you can try the opposite approach. Just add a wrapper div into your target page.
Related
How can we use function anchor of codeigniter for div tag?
I got div around which I want to put anchor(uri segments, text, attributes)
in pure html it looks like this:
<a class="a_services" href="http://justinbieber.com">
<div id="seminar">Hello world</div>
</a>
You can include code in the second parameter.
echo anchor('http://justinbieber.com', '<div id="seminar">Hello world</div>', 'class="a_services"');
I have one question.
I use CKEditor 4.1 for replace textarea. When open page with CKEditor then text in CKeditor disappears.
Like this:
Before loading:
Afrer loading:
After loading CKEditor not work.
Any idea why?
I have solve the problem with setTimeout function
<script type="text/javascript">
setTimeout(function(){
CKEDITOR.replace('textarea');
},1000);
</script>
You can set text within Html tag calling ckeditor.js
<div class="columns">
<div class="editor">
<div cols="10" id="editor1" name="editor1" rows="10" contenteditable="true">
"Your Text Here...."
</div>
</div>
Then load you will see the text element inside of "div" Element.
For now, I have the following structure of the web page:
<div id="container">
<div id="navigator"></div>
<div id="content"></div>
</div>
Literally, the div with id "navigator" is for navigating use. I can choose such as "home", "login", "register", etc. I want to use ajax to refresh the whole div with id "content".
So what should I do?
1) Apparently, I need to have these separate divs. But in what form? Should I use ui:composition or else?
2) What should be the ajax part? Can you give me an example?
So I've got an image that inside a tag, and I've also got a div that is centred in the middle of the screen.
How do I make this div invisible until the image is clicked?
Preview of page when the div is visible:
So that added to cart is a div in the middle of the screen. I want that to only show up when the "Add to cart" button has been clicked.
I want the div to go away again after 2 seconds. Transitions would be nice (eg fade into visibility), but I don't mind.
Set the display of the div to none and do a onclick event for the image which sets the display of the div to block. I would recommend using JQuery to add in any transitions or animations.
Something like (without animations):
<div id="cart" style="display:none">
</div>
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/>
Worked it out. Had to use jQuery.
In the < head> :
<script>
$(document).ready(function(){
$(".addtocart").click(function(){
$(".addedcartbg").fadeIn(500);
$(".addedcartbg").delay(1000);
$(".addedcartbg").fadeOut(500);
});
});
</script>
In the < body> :
<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div>
css
.hide{
display:none;
}
html
<div class="hide">
// put content here
</div>
<img class="hide-show" src="site.com/image.png" alt=""/>
js
$(function(){
$('.hide-show').bind('click',function(){
$('.hide').fadeIn(500).delay(2000).fadeOut(500);
});
});
I have this view:
<script type="text/x-handlebars" data-template-name="articlesOne">
<div class="main">
<div id="articlesOne">
<h2 id="article-title">{{App.ArticlesOneController.article.title}}</h2>
<h3 id="article-lead">{{App.ArticlesOneController.article.lead}}</h3>
<div id="article-body">{{App.ArticlesOneController.article.body}}</div>
</div>
</div>
</script>
When I change the App.ArticlesOneController.article.title property to, say <p>Pragraph</p>, the browser displays the plain text, not parsed as HTML.
I would like to display that in HTML, due to building an editor on that div. How should I do that?
You should try triple brackets with {{{App.ArticlesOneController.article.title}}}. I think this link is useful for you: Show property which includes html tags