Cheers! Building a webpage from scratch using tornado io. I have different graphs and wanted to use some of the single page app magic. So I thought do a div and swap out the content doing:
<div id="chartType"> Chart goes here</div>
Load Graph
<div id="maincontent"></div>
<script type="text/javascript">
$('#addContent').click(function(){
$("#maincontent").replaceWith("{% include graph.html %}");
return false;
});
</script>
HTML does not seem to like the {% include graph.html %}
If I do something like $("#maincontent").load(/path/to/file) it keeps adding the content and not swapping it.
My question is how to swap the div content with different {% includes %}?
Is there a better way of doing this (Am I misusing the %includes% )?
Many thanks
I believe that $("#maincontent").load(/path/to/file); should work. I think you may be running afoul of caching, and so you may need to do this:
var setMainContent = function(path) {
$.get({
url: path,
cache: false
}, function(data){
$("#maincontent").html(data);
});
};
And then call your function in your click handler:
setMainContent(/path/to/file);
What I usually do with very simple content swaps is use css to handle it.
For instance, if I have the content I want to show originally in Div A and the content I want to replace it with in Div B, by default I will have Div A set to 'display: block' and Div B set to 'display: none'. Then, to swap the content, use javascript to set Div A to 'display: none' and Div B set to 'display: block'.
var divA = document.getElementById('divA');
var divB = document.getElementById('divB');
function hideDivA() {
divA.style.display = 'none';
}
function showDivB() {
divB.style.display = 'block';
}
function swapContent() {
hideDivA();
showDivB();
}
#divA {
background: #74CFAE;
color: #000;
display: block;
}
#divB {
background: #555;
color: #fff;
display: none;
}
<div id='content-wrap' onclick='swapContent()'>
<div id='divA'>Div A (initially visible content)</div>
<div id='divB'>Div B (initially not visible content)</div>
</div>
Depending on your use case, you can also create a template and assign that into your DOM.
For instance.
<div id="runtime_area"></div>
<script type="text/html" id="page1">
<b>Banner</b>
</script>
Then later
document.getElementById("runtime_area").innerHTML = document.getElementById("page1").innerHTML
Related
I have a couple of functions, the first replaces the contents of a div the second restores the original div. The problem is because I'm using the replaceWith method, the second div no longer exists if I try to call it a second time. Is there a better way to do this? I've experimented creating a variable that stores the contents of the second div so I can resuse it, but could not get it to work.
The code that I have is:
$(document).ready(function() {
$('#trigger_adults').click(function() {
var mainClone = $("#main-content").clone();
$('#main-content').fadeOut('fast', function() {
$('#main-content').replaceWith($('#adults'));
$('#slider-sec').slideUp('slow');
$('#adults').fadeIn('fast');
$(window).scrollTop(0);
});
$('#return').click(function() {
$("#adults").replaceWith(mainClone.clone());
$('#adults').fadeOut('fast');
$('#slider-sec').slideDown('slow');
});
});
});
Thanks in advance!
You could have both contents in the same div and toggle the visibility of their parent divs. Use javascript just to toggle the wrapper's class.
$('#toggle').click(function() {
$('#wrapper').toggleClass('init-state new-state');
});
#wrapper {
border:1px solid #d8d8d8;
}
.init-state #new,
.new-state #init { display:none; }
.inner {
padding:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="wrapper" class="init-state">
<div id="init" class="inner">Initial Content</div>
<div id="new" class="inner">New Content</div>
<button id="toggle" type="button">Toggle</button>
</div>
From the docs
The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page
you either need to manually set the display style property back to its original value, or call jQuery's .fadeIn() function which will do the opposite of .fadeOut()
In html page am having an div-reportControlPanel as below . I have included another div-reportControlPanel1 as same with different id .
<div id="reportControlPanel" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>
<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>
Here Am show/hide the div's based on url am triggering .
if(prptName == "css.prpt")
{
alert("if");
document.getElementById("reportControlPanel").style.display = 'none';
document.getElementById("reportControlPanel1").style.display = 'block';
}
But as am using same sub Div-promptPanel under two different div my content is not loading properly . promptPanel is pentaho system used div. I am trying to have an another div to modify some css for my prpt.
Thanks.
To reiterate what Moishe said to you already: id are meant to be unique. You currently have two promptPanel id's, which means the second one will likely never be called. Now, you could use javascript, but with minimal knowledge of what your code looks like you could use a simple hash url + some basic css.
$(document).ready(function() {
$('a').click(function() {
$('#url').html($(this).prop('href'));
});
});
div.pentaho-rounded-panel-bottom-lr {
display: none;
}
div.pentaho-rounded-panel-bottom-lr .pentaho-rounded-panel-bottom-lr {
display: block;
}
:target {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="url"></div>
"Open" panel 1
"Open" panel 2
<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
this is some text in the first control panel.
</div>
</div>
<div id="reportControlPanel2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
this is some text in the second control panel
</div>
</div>
Things have gotten out of hand for me. What started off as the simplest solution has ballooned to the point where it is no longer manageable. I need to come up with a way to simplify a process.
Currently I have a map with pins denoting specific countries world-wide. As the mouse hovers over a pin, a hidden div appears. When you mouse over another one, the previous div disappears and a new one opens. I started with like 5 of these and it wasn't an issue but I keep getting requests for more and want to manage the script in a different way now.
$('#PH1').mouseenter(function () {
$('#BO2').hide();
$('#US2').hide();
$('#UK2').hide();
$('#CH2').hide();
$('#BZ2').hide();
$('#QC2').hide();
$('#OT2').hide();
$('#VA2').hide();
$('#RU2').hide();
$('#JT2').hide();
$('#HK2').hide();
$('#SH2').hide();
$('#BJ2').hide();
$('#XI2').hide();
$('#BE2').hide();
$('#AT2').hide();
$('#FR2').hide();
$('#MX2').hide();
$('#PH2').show();
});
$('#PH1').click(function (e) {
e.stopPropagation();
});
$('#mint').click(function () {
$('#PH2').hide();
});
In this instance div id #PH1 is the pin, when the mouse enters the div it hides all of the other div's #**2 and displays the one related to #PH1, which is #PH2
This list is repeated for each DIV. Every time I need to add a new DIV I need to make each existing list longer as well as create a new one. How can this process be made much simpler?
Thats not a right way to do this, you should use classes for this. But their is a wayaround for this all you need to is add a class add class ele1 to all #**1 and ele2 to all #**2:
then
$('.ele1').mouseenter(function () {
$(".ele2").hide();
var id = this.id;
var newId = id.substring(0,2)+"2";
$("#"+newId).show();
});
Make a loop:
var all= ['#BO2', '#US2', '#UK2', '#CH2', '#BZ2', '#QC2', '#OT2', '#VA2', '#RU2', '#JT2', '#HK2', '#SH2', '#BJ2', '#XI2' , '#BE2', '#AT2', '#FR2', '#MX2', '#PH2']
all.forEach(function (i){
$(i).hide();
});
Use a class selector on all of the DIVs you want to hide/show instead of an ID.
First, add a shared class to all DIVs so we target all of them by class.
HTML: class="hidden-divs"
jQuery: $('.hidden-divs').hide();
Then show the relevant DIV.
$('#PH2').show();
Using your first example, it would look like this:
$('#PH1').mouseenter(function () {
$('.hidden-divs').hide();
$('#PH2').show();
});
You can use jquery to hide multiple divs if you can select them. For example, suppose you have a common class ".map_divs" on all your divs, you could easily do:
$(".map_divs").hide();
On a side-note, you could solve all this on CSS, using :hover. For example:
.map_divs:hover {
display: block;
}
If you can edit the div's yourself (if it is not generated by a library) I would do it like this.
Add a common class to all your divs. Then on each div, add a data attribtue to the related id.
<div class="pin" id="PH1" data-rel="PH2"></div>
Then you can have a simple function like this:
$(".pin").mouseenter(function() {
var relatedId = $(this).data("rel");
$(".pin[id$='2']").hide(); // Hide all pins with id ending in 2
$("#" + relatedId).show() //show PH2
})
Using classes might be a better option here. You can then just attach the mouseenter event on document ready to all pins. This will work for an infinite number of pins too.
$('.pin').mouseenter(function () {
$('.popup').removeClass('show');
var id = this.id.split('_')[1];
$('#popup_' + id).addClass('show');
});
.pin {
width:30px;
height:30px;
margin-bottom:20px;
background-color:red;
}
.popup {
display:none;
width:100px;
height:100px;
margin-bottom:20px;
background-color:blue;
}
.popup.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pin_1" class="pin"></div>
<div id="popup_1" class="popup"></div>
<div id="pin_2" class="pin"></div>
<div id="popup_2" class="popup"></div>
If your div element is ordered like below, you can get the same result using css only, which will increase speed and overall experience (especially on phones and tablets).
When "hover" the yellow squares, the popup will be visibible even when "hover" the popup.
.pin {
width:30px;
height:30px;
margin-bottom:20px;
background-color:red;
}
.popup {
display:none;
width:100px;
height:100px;
margin-bottom:20px;
background-color:blue;
}
.pin:hover + .popup {
display:block;
}
.pin.type2 {
background-color:yellow;
}
.pin.type2:hover .popup {
display: inline-block;
margin-top: 30px;
}
<div id="pin_1" class="pin"></div>
<div id="popup_1" class="popup"></div>
<div id="pin_2" class="pin"></div>
<div id="popup_2" class="popup"></div>
<div id="pin_3" class="pin type2"><div id="popup_3" class="popup"></div></div>
<div id="pin_4" class="pin type2"><div id="popup_4" class="popup"></div></div>
What i'm trying to accomplish is this:
I have a parent div which has multiple childs. I don't want to display the parent only the children. If I do this:
.navbar-default, #filters, #options {
display: none;
}
div#filter_date {
display: block;
}
Then it just doesn't show the the parent div with its children.
I have tried to make the question as easy as possible.
You cannot accomplish this the way you anticipate, as styles are inherited.
Your only solution would be to override the print styles for the parent to give the impression it was being hidden, e.g set any border to none, remove any background colors or images, remove padding, margin etc. Take whatever styles you have applied for the parent, and in your print CSS override them with properties which will provide the illusion the parent isnt in place.
Otherwise you are attempting to change the structure of your DOM with CSS alone, which is not possible.
Mmm, I think you can use jQuery .unwrap if I understand properly what you're trying to achieve.
Adapted from jQuery's own example...
<div class="yellow">
<p class="in-out">Am I in the </p>
<p class="in-out">div or out</p>
<p class="in-out">the div</p>
</div>
....
<button>Toggle</button>
---JS---
var pTags = $( ".in-out" );
$( "button" ).click(function() {
if ( pTags.parent().is( ".yellow" ) ) {
pTags.unwrap();
}
else {
pTags.wrap( "<div class='yellow'></div>" );
}
});
....
---CSS---
.yellow
{
background-color: yellow;
}
See example here...http://jsfiddle.net/richf/8LvJZ/
Obviously you don't need the button in your case.
I have a HTML-page with a lot of different DIVs in it and I want to print out the the DIV that the user has clicked in and hide all the rest.
Can someone tell me how to do this in Javascript please?
<html>
<head>
<title>Print Demo</title>
<script type="text/javascript">
<!-- MY JAVASCRIPT FUNCITON -->
</script>
</head>
<body>
<div id="div1">
Print the page with this div
</div>
<div id="div2">
Print the page with this div
</div>
<div id="div3">
Print the page with this div
</div>
</body>
</html>
This is just to extend pimvdb's answer.
jQuery:
$("a").on("click", function(){
$("div").hide();
$(this).parent().show();
});
Or as suggested:
$("a").on("click", function(){
$("div").hide();
$(this).closest("div").show();
});
Hiding an element means setting it's style.display property to "none". Showing means setting it to "block" for a div element.
In combination with getElementsByTagName, you could accomplish this: http://jsfiddle.net/b9cgM/.
function show(elem) {
// hide all divs initially
var allDivs = document.getElementsByTagName("div");
for(var i = 0; i < allDivs.length; i++) {
allDivs[i].style.display = "none";
}
// show the appropriate div
elem.parentNode.style.display = "block"; // parent of the <a> is the <div> to show
}
You could bind the event like <a href="#" onclick="show(this); return false;">. The element (this) is then passed to show.
As a side note, libraries such as jQuery make this even easier; you might want to check that out (though I don't recommend including it if the only use case would be this).
sorry, there is only window.print() for printing in js, which means you can only print the entire window. if you want some to be able to print your document, make it printable using CSS.
for instance, maybe you want your navigation to disappear for printing, but leave the title of your page there and the name of your web site and maybe a page URL (sometimes browsers like firefox cut those off if they are too long). and sometimes some sites take away the browser controls and make the mistake of leaving you with no print button - and it's an online purchasing site... it's happened before.
<style type="text/css">
#media print {
.boxGreen {
padding:10px;
border-color:green;
border-style:dashed;
border-width:thin;
}
}
#media screen {
.boxGreen {
padding:10px;
border-color:green;
border-style:dashed;
border-width:thin;
}
}
</style>
you CAN do an onclick="switchtodiv('someid')" and then after the divs do this:
<div onclick="switchtodiv('span1')">ClickMe<span id="span1">some content</span></div>
<div onclick="switchtodiv('span2')">ClickMe<span id="span2">some content</span></div>
<div onclick="switchtodiv('span3')">ClickMe<span id="span3">some content</span></div>
<!--you can generate these divs using a for statement...-->
<script type="text/javascript">
//switchdiv allows only 1 div tobe
function switchdiv(id) {
var ids=new Array('span1','span2','span3');
var i;
for (i=0; i < ids.length; i++) {
if (ids[i] == id) {
document.getElementById(ids[i]).style.visibility='visible';
document.getElementById(ids[i]).style.display='block';
} else {
document.getElementById(ids[i]).style.visibility='hidden';
document.getElementById(ids[i]).style.display='none';
}
}
}
</script>
You could use a javascript function like document.getElementById(id) to hide the two other divs
So in your function you could just use
function hide1() {
document.getElementById(div2).style.display = "none";
document.getElementById(div3).style.display = "none";
}