I've got a test site here (still in development) and I'm trying to get the little notification at the top to stay hidden once you click close.
Currently my script is like this:
<style type="text/css">
<!--
.hide {
display:none;
}
.show {
display:block;
}
-->
</style>
<script type="text/javascript">
<!--
var state;
window.onload=function() {
obj=document.getElementById('alert');
state=(state==null)?'show':state;
obj.className=state;
document.getElementById('close').onclick=function() {
obj.className=(obj.className=='show')?'hide':'show';
state=obj.className;
setCookie();
return false;
}
}
function setCookie() {
exp=new Date();
plusMonth=exp.getTime()+(31*24*60*60*1000);
exp.setTime(plusMonth);
document.cookie='State='+state+';expires='+exp.toGMTString();
}
function readCookie() {
if(document.cookie) {
state=document.cookie.split('State=')[1];
}
}
readCookie();
//-->
</script>
and then:
<div id="alert" class="show" style="float: left; width: 100%;"><div style="width: 80%; text-align:left; float:left;">Sorry for the downtime, we were experiencing some problems with our web host. Everything should be back to normal now =D</div>
<div style="width: 18%; text-align:right; float:left; padding-right: 20px;">close</div> </div>
but it doesn't seem to work. Any ideas?
Thanks in advance!
Sam
First of all, you need to fix readCookie, your call to split will return everything after "State=", which will be stored in the first offset of the returned array, so instead do this:
function readCookie() {
if(document.cookie) {
var tmp = document.cookie.split(';')[0];
state = tmp.split('=')[1];
alert(state);
}
}
For me, it does work (Firefox 3.5, Windows XP). But the div will not disappear before the site has finished loading. You might want to set the div to style="hide" in the first place and have it appear after the page has loaded.
Related
I have an html file(a webpage). I want when I press a button on it, the page should be replaced by another html file (with its own css, javascript functions etc) without being redirected to some other link.
For example, if link in first case is abc.com/def it should be same after too.
Using this code, I am able to change webpage look, but not getting how to change look (and also manage to load css and js functions) from another file.
<script type="text/javascript">
document.body.addEventListener('click',function(){
document.write("THIS IS NEW TEXT")
},
false);
</script>
You need to look into frameworks like AngularJS, Specially Routing of Angular. They provide such features built-in for web applications. However, you can do it the hard way, using javascript, like you are doing it right now. Add CSS and change whole body HTML using javascript if you don't want to learn any new framework or libraries.
You want to use PJAX,
Here's a link for an example.
As discuss by others, you should use a Framework to do this..
But this is a complete solution you can inspire of:
let layouts = {}
let current = null
// Display the new page by deleting current, and replacing by the good one
let displayLayout = (layout_id) => {
let parentNode = current.parentNode
parentNode.removeChild(current)
current = layouts[layout_id]
parentNode.appendChild(current)
loadEvents(current)
}
// Load event for HTML DOM you just created
let loadEvents = (layout_el) => {
Array.from(layout_el.getElementsByClassName('go-to-layout')).forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
displayLayout(e.currentTarget.dataset.layout)
})
})
}
// On init I get all the existing layout, but you can build you own dictionary an other way.
Array.from(document.getElementsByClassName('layout')).forEach(l => {
layouts[l.id] = l
if (l.classList.contains('active')) {
loadEvents(l)
current = l
}
else {
l.parentNode.removeChild(l);
}
})
/* Global CSS */
body, html, .layout {
height: 100%;
margin: 0;
}
* {
color: #FFF
}
.layout {
display: flex;
}
.nav, .page {
}
.nav {
width: 150px;
background: #555;
}
/* Special CSS for one layout */
#layout1 {
background: red;
}
#layout2 {
background: blue;
}
<div id="layout1" class="layout active">
<div class="nav">
Page 2
</div>
<div class="page">
This is page 1
</div>
</div>
<div id="layout2" class="layout">
<div class="nav">
Page 1
</div>
<div class="page">
This is page 2
</div>
<style>.page { font-size: 2em }</style>
</div>
To change selector so it only show/hides when i click the image i put spoiler/ popdown menu directly after .OS image. Right now the popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
But the code isn't perfect because when i click the 1st MAC both spoilers are opened.
But I want that spoilers are opened one at a time
But the main problem is that I can't fix the javascript code properly inside these types of spoilers (dokuwiki class) inside <td> tags:
This is the javascript code I use :
<div class="dokuwiki">
<div class="right_page">
<div class="entry-content">
<script type="text/javascript" src="./zzzz_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(".details").is(":visible"))
{
$(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(".OS").not(this).each(function(i) {
$(".details").hide("slow");
});
$(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
I thought about doing a video to better explain the problem and provide the local version of files for testing code:
Thanks in advance
This code works:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});
I don't know what you're asking but here is what I think you want:
When clicking on an image, show the details below it and hide all others. If the details are already visible, hide them. Clicking something inside the details should not affect anything.
Demo
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
var details = $(this).next(".details");
$(".details").hide("slow");
if(details.is(":hidden")) {
details.show("slow");
}
});
});
Getting TypeError: document.getElementById("free_shipping") is null
This is what im trying ---
I just want to make sure that these two particular div show only only my home page . but im getting this error however alerts are working. Let me know if im missing something.
Can i made this code even better as i only have to use JAVACRIPTin this case.
JS CODE
<script type="text/javascript">
var myaddr = location.host;
if(myaddr == "abc.xy.com")
{
document.getElementById('free_shipping').style.display="visible";
document.getElementById('sale').style.display="visible";
//alert("I am in if");
}
else{
document.getElementById('free_shipping').style.display="none";
document.getElementById('sale').style.display="none";
//alert("I am in else");
}
</script>
HTML CODE
<!--####### Free Shipping Start ##############-->
<div id="free_shipping">
</div>
<!--Free Shipping End-->
<!--####### Sale Start ####### -->
<div id="sale">
</div>
<!--Sale End-->
CSS CODE
#free_shipping
{
background: url("../images/template/swap_free_shipping.jpg") no-repeat scroll 0 0 transparent;
height: 112px;
left: -57px;
position: relative;
top: 256px;
width: 62px;
}
#sale
{
background: url("../images/template/swap_sale.jpg") no-repeat scroll 0 0 transparent;
left: -55px;
position: relative;
top: 384px;
width: 59px;
height: 79px;
}
If your <script> is in the <head></head> section of your website, then it will start to execute before the page has loaded, and therefore free_shipping and sale will not exist in the DOM.
Try doing the following, which will make your code happen once the page has finished loading...
<script type="text/javascript">
window.onload = function() {
var myaddr = location.host;
if(myaddr == "abc.xy.com")
{
document.getElementById('free_shipping').style.display="visible";
document.getElementById('sale').style.display="visible";
//alert("I am in if");
}
else{
document.getElementById('free_shipping').style.display="none";
document.getElementById('sale').style.display="none";
//alert("I am in else");
}
}
</script>
This can also be done using the jquery library, but my knowledge of it is exceedingly limited.
Perhaps the JS is being called before the document has fully loaded and therefore the element doesn't exist yet?
Try it with the JS code at the bottom of the page or call it only after full page load.
I think in your case script execution was called early than actual elem was created
<body>
<!--####### Free Shipping Start ##############-->
<div id="free_shipping">
</div>
<!--Free Shipping End-->
<!--####### Sale Start ####### -->
<div id="sale">
</div>
<!--Sale End-->
</body>
<script type="text/javascript">
var myaddr = location.host;
if(myaddr == "abc.xy.com")
{
document.getElementById('free_shipping').style.display="visible";
document.getElementById('sale').style.display="visible";
//alert("I am in if");
}
else{
document.getElementById('free_shipping').style.display="none";
document.getElementById('sale').style.display="none";
//alert("I am in else");
}
</script>
Should solve your problem, also check this - javascript:how to write $(document).ready like event without jquery
I have a question about your spoiler in this page:
http://jdownloader.org/download/index
When i click on Windows it appears a table but when i click on Linux the content of Windows disappears. I want create a spoiler like this but that the content of one spoiler doesn't disappear when i press another spoiler.
What exactly should I change in this code (html source)?
<div class="dokuwiki">
<div class="right_page">
<div class="entry-content">
<script type="text/javascript" src="./JDownloader.org - Official Homepage_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
That part finds all the ones that are NOT the current (clicked) one and hides them.
I keep coming up against this issue. Displaying news on a website. And I'd like to come up with a solution to use like a template, something I can just drop on a site easily.
The solution I keep seeing is an iframe with javascript to scroll the content. However, I'm really opposed to the idea of using iframes, I think the time for those has passed.
I want to use JS without a framework, because it disallows using other frameworks.
Does anyone know where I could find something robust?
(I'm thinking of using vertical scrolling, but I'm also curious about other solutions)
I found a script that seems to wok well for me, maybe someone else will find this helpful
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=1000; //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1; //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1; //Pause marquee onMousever (0=no. 1=yes)?
var tim;
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed;
var pausespeed=(pauseit==0)? copyspeed: 0;
var actualheight='';
function scrollmarquee(){
//document.write(parseInt(cross_marquee.style.top));
//if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) {
if (document.getElementById('track').value == "") {
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) {
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px";
//alert(actualheight);
}
else {
//alert(parseInt(marqueeheight));
cross_marquee.style.top=parseInt(marqueeheight)-8+"px";
}
}
}
//on mouse out
function mouse_out() {
clearTimeout(tim);
scrollmarquee;
}
//init()
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee");
cross_marquee.style.top=0;
marqueeheight=document.getElementById("marqueecontainer").offsetHeight;
actualheight=cross_marquee.offsetHeight;
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px";
cross_marquee.style.overflow="scroll";
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",55)', delayb4scroll);
}
//event listener
if (window.addEventListener) {
window.addEventListener("load", initializemarquee, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", initializemarquee);
}
else if (document.getElementById) {
window.onload=initializemarquee;
}
the html:
<!-- scroll -->
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" class="vmarquee_content">
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
<input id="track" name="track" type="hidden" value="">
and the css:
#marqueecontainer{
position: relative;
width: 250px; /*marquee width */
height: 150px; /*marquee height */
background-color: white;
overflow: hidden;
border: 1px solid #666666;
padding: 2px;
padding-left: 4px;
}
.scroll_div {
border:solid 1px #3366FF;
width: 260px;
width/**/: 280px !important;
}
.vmarquee_content {
position:absolute;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
Why don´t you take a div insert an other div an give the second div a nagative top value.
<script type="text/javascript">
function toTop(top_value)
{
if (top_value == 0)
{ document.getElementById('news').css.top = '0'; }
document.getElementById('news').css.top = '-5px';
}
window.setTimeout('toTop(1)', 100);
window.setTimeout('toTop(0)', 10000);
</script>
This is untested, but I´ve done it this way.