Making elements change without refreshing the page - javascript

So I need to make something like this happen - http://jsfiddle.net/3nk8x98g/1/ everything is explained in the link.
What do I use Javascript or AJAX? And maybe someone knows a tutorial or something out there? Thanks.
<body>
<div class="row">
BUTTON1
BUTTON2
BUTTON3
</div>
<div class="row background">
Changing content, this content changes depending on which button you press. Without refreshing the page.
</div>
</body>

AJAX is just a JavaScript technique, so yet, you need to use AJAX and JavaScript. Look at this for examples of how to achieve it using JavaScript only.
<body>
<div class="row">
<a id="one" href="#">BUTTON1</a>
<a id="two" href="#">BUTTON2</a>
<a id="three" href="#">BUTTON3</a>
</div>
<div id="content" class="row background">
Changing content, this content changes depending on which button you press. Without refreshing the page.
</div>
<script>
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var content = document.getElementById("content");
one.addEventListener("click", function() {
content.innerHTML = "One";
});
two.addEventListener("click", function() {
content.innerHTML = "Two";
});
threee.addEventListener("click", function() {
content.innerHTML = "Three";
});
</script>
</body>

You can do this. Ajax is just for getting data from server without refreshing but you have to use javascript to attach that content to html dynamically.
$('a').on('click', function(){
$('#changeingDiv').html('Changed Content');
}
);
this is just for example. Bind an event to the buttons, and on its click change the content of the div. For different content on different button click you can add id to them and change the content accordingly on some condition.
http://jsfiddle.net/3nk8x98g/2/

Related

onClick inside an in div loaded page

I load a page inside a div. This div supposed to trigger a function on a mouse click. I would like that this onClick event also works when you click on the loaded page.
If you load a page inside the div, the functions of the loaded page only works for that page.
How can I make it happen that also the onClick function get triggered for the loaded page?
This is a simple example of the code:
function load() {
var url_view = '<object type="text/html" data="http://www.example.com/"></object>';
document.getElementById("image").innerHTML=url_view;
}
window.onload = load;
function showbox() {
alert("test");
}
<div id ="frame" onclick="showbox()">
<div id="image">
</div>
<div class="infotext">
<span>here comes some text.</span>
</div>
</div>
To be clear
What I want to achieve is that when you load the page, you'll load data from example.com in a div with the id "image". This event happens with the function 'load()', on window.load.
When that is ready, I would like that you trigger the 'showbox()' function on a mouseclick when you click inside the div with the id "image" (the div where example.com is loaded into).
You can try something like this:
<div id ="frame">
<div id="image">
</div>
<div class="infotext">
<span>here comes some text.</span>
</div>
</div>
JS:
function showbox() {
alert("show box");
}
$(document).ready(function() {
$.get('https://jsfiddle.net/about', function(data) {
$('#image').html(data);
showbox();
});
$('#image').click(function() {
showbox();
});
});
Run it on jsfiddle due to CORS: https://jsfiddle.net/usn9qam7/1/

html buttons change div content or toggle it again

I'd like to know how to create buttons which can change the content inside a div and if the last clicked button (actual content) is clicked again instead of change it should clear the div.
So far I got the code to create and change the content like this:
HTML
<button onclick="changeNavigation('bl1')">Techniker</button>
<button onclick="changeNavigation('bl2')">Übersetzer</button>
<button onclick="changeNavigation('bl3')">Qualitychecker</button>
<div id="text_content"></div>
<div id="bl1">
<p>This is text 1</p>
</div>
<div id="bl2">
<p>This is text 2</p>
</div>
<div id="bl3">
<p>This is text 3</p>
</div>
JS
function changeNavigation(id) {
document.getElementbyId('text_content').innerHTML= document.getElementbyId(id).innerHTML;
}
With this code so far I can make the content inside the div change by clicking the bottons. But once the box has been filex I can only change the inside content. If I click the button from the actual content again nothing happens but I'd like to clear the content.
Can maybe anyone explain me or link me the name of such a funtion?
Thanks in advance!
Im not really sure what you're trying to get here? If you click a nav item twice to clear the div?
If so try something like this
function changeNavigation(id) {
var textContent = document.getElementbyId('text_content'),
containerDiv = document.getElementbyId(id);
if(textContent.innerHTML === containerDiv.innerHTML){
textContent.innerHTML = '';
} else {
textContent.innerHTML = containerDiv.innerHTML
}
}
What we're doing here is checking if the text_content is the same value as the div you're getting the content from. if so then empty it.

How to control Loading panel using master page and without using AJAX

I have an asp.net project and I want to show the progress image (GIF) without using AJAX and using simple java-script DIV magic.
All I want to do is to put one div (which show animation clock while page loading in progress) in master page (asp.net master page so I need not to repeat the code on every content pages) and show it when page load is in progress.
I hope your understand what I want to do.
Thanks,
You can achieve like this
<body style="background-color:#FFFFFF;" onLoad="init()">
<div id="loading" style="position:absolute; width:200px; height:163px; text-align:center;top:310px; left:487px;">
<img src="images/loading.gif" border=0 style="margin:38px"/>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
make 2 sections in your document's body
<div id="progress">
// Code for gif image
</div
<div id="content" style="display:none;">
// Whole page content
</div>
And after that include this javascript. Not in header
<script>
document.getElementById("progress").style.display = 'none';
document.getElementById("content").style.display = 'block';
</script>
If you know jQuery you can do similarly on $(document).ready() event

phonegap dynamic javascript button

Learning how to use Phonegap to create an Android application I am still experimenting with the fundamentals of HTML and JavaScript. Trying to add a button, I must have done something fundamentally wrong...
this is my body element:
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content" id="divContent">
<p id="content"></p>
</div>
</div>
To start with I have some basic functionaloty. I have a databasequery (it works) and the result should produce some text and a button:
if(results.rows.item(0).c == 0){
document.getElementById("content").innerHTML=
"You don't have any service items ....etc";
var btn = document.createElement("newItem");
btn.setAttribute("type", "button");
btn.setAttribute("value", "AAARGH!");
btn.setAttribute("name", "btnNew");
document.getElementById("divContent").appendChild(btn);
}
The text is displayed, the button is not and I cannot understand why. From what I have read this is the way to create a button with JavaScript.
Full source is available here: http://code.google.com/p/easy-service/source/browse/trunk/EasyService-Common/app/app.html
You need to create the button node like this:
var btn = document.createElement("input");
The parameter you're passing in is the type of element-- in this case, we want an input element.

Any way to open part of a page in window.open()

I have an html page and basically it contains 2 div blocks and 2 links. Now, when I click one link then the content of first div should get opened in a new window. Similarly, when I click second link content of second div should get opened in another new window.
Here's a code - http://jsfiddle.net/PAJWV/5/
I do agree that it is impossible, but in case there is a workaround. Thanks.
function printPage(divid)
{
elementId=divid;
var printContent = document.getElementById(elementId);
var windowUrl = 'about:blank';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
var printWindow = window.open(windowUrl, windowName,'left=500,top=500,width=500,height=500');
printWindow.document.write('<html><head></head><body>'+printContent.innerHTML+'</body></html>');
}
Try above code by calling the function onclick
Just create a page with the content from div1 inside of it and call your script to open this page. Same thing with div2.
You can pull the content from another file for div1 using an iframe and do the same for div2.
Why can't you do it this way?
Try this code :
http://jsfiddle.net/PAJWV/9/
will not run fine in jsfiddle but will run fine with actual code due to some limitations.
I didnt try this but you can link as
window.open("index.html#second");
and along with that hiding other divs with id not #second will work fine
you can create separate html for div1 and div2 like
window1.html
<body>
<div id="first">
First Div contents.
</div>
</body
window2.html
<body>
<div id="second">
second Div contents.
</div>
</body
main.html
<div>
<a id="link1" href="window.open('window1.html')">Open div 1</a><br />
<a id="link2" href="window.open('window2.html')">Open div 2</a>
</div>

Categories