background-image: url not working properly - javascript

The problem I am encountering is that when I use javascript to get the html file inside another html file, the background image turns invisible. But when I open the file with the background image the image is visible.
To make this understandable, I want to include second.html (with background image) in first.html using javascript without the image being invisible.
First.html (main)
<html>
<head>
<script>
$(function(){
$("#second").load("second.html");
});
</script>
</head>
<body>
<div id="second"></div>
</body>
</html>
Second.html (with image)
<body style="background-image: url('img/dashboard-layout.png'); background-repeat: no-repeat; background-color: #303032;">
<!--Code goes here-->
</body>

This is my working example
first.html
<html>
<head>
<script>
$(function(){
$("#second").load("second.html");
});
</script>
</head>
<body>
<div id="second" style="height:100px;width:100%;"></div>
</body>
second.html
<div style="height:100px;width:100%;background-image: url('http://blogs.atlassian.com/wp-content/uploads/01-new-icons.png'); background-color: #303032;">
Note that div has default height = 0px you need to set height for divs to work this eg.

Related

Why aren't images appearing when I load contents of a different page into the current page?

I have an index.html page with a container div. When I load() an external page into the container div, it works as far a text goes, but images are missing. Is there a way to fix that? I've ruled out cross-origin issues; both pages are on the same domain.
Here's my index.html page.
<!doctype html>
<html>
<head>
<title>Lakes</title>
</head>
<body>
<div id='div1_top'>
<h1>Lakes by state</h1>
<p>This is some text.</p>
</div>
<div id="nav">
<li><a href="states/illinois.html">Illinois Lakes</a</li>
<li>Indiana Lakes</li>
<li>Iowa Lakes</li>
</div>
<div id="content">This is where content goes</div>
<script src="js/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function() {
$('#nav a').click(function(e) {
$('#content').hide().load($(this).attr('href'), function() {
$('#content').show();
});
return false;
});
});
</script>
</body>
</html>
Here's one of the external pages being loaded into the div on the index.html page.
<DOCTYPE = html>
<html>
<body>
<div id="image_lake">
<img src="../img/lake-michigan.jpg" alt="lake Michigan" height="100" width="300">
</div>
<div>
<h1>illinois</h1>
</div>
<div>
<h3>This is just some random placeholder text.</h3>
</div>
</body>
</html>
Thanks for any help.
That's because the source images are using Relative URLs.
The fix is to include the basehref of the images origin, or convert their relative paths to absolute ones.
Otherwise, the images have been protected on the server side.

Detect event on iframe

My application opens in an iframe..
$(window).scroll(function() { alert("scroll is");});
if i run this code without iframe it works but with iframe it does not work
The following is the content of an HTML file I include in an iFrame, the Javascript gets called correctly. Perhaps compare it to what you have written.
<html>
<head>
<title>Test iFrame</title>
<!-- Add Some Space to Simulate Content (not needed) -->
<style>
body {
width: 100vh;
height: 100vh;
}
</style>
</head>
<body>
<p>iFrame content goes here</p>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
// wait for jQuery to load
$(document).ready(function() {
$(window).scroll(function() {
alert("scroll is");
});
});
</script>
</body>
</html>

Hiding/showing content whether javascript is enable/disabled

I have seen some posts regarding wanting to do something like this, but I am at a loss to understand why my code doesn't work. I'm trying to make sure that users who visit a page have javascript enabled. If disabled, I want to hide all content and display a simple page with a message that the main page cannot be displayed without javascript.
I have the following:
<html>
<head><title>my site</title>
<noscript><style type="text/css">site {display:none;} </style></noscript>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<script type="text/javascript">document.getElementById("noscriptmsg").style.display = 'none';</script>
</body>
<body>
<div class="site">
<!--content -->
</div>
</body>
</html>
Currently this shows the correct javascript-enabled page, but a completely blank javascript-disabled page. What would cause this?
Why not use the build in noscript in one body tag:
<html>
<head><title>my site</title>
</head>
<body>
<noscript>
<style type="text/css">
#site {display:none;}
</style>
<div id="noscriptmsg">
You need to have javascript enabled in order to view this site.
</div>
</noscript>
<div id="site">
</div>
</body>
</html>
It looks like in the body onload you are trying to call the method hideDiv()
First, I'd recommend moving your script tag
<html>
<head><title>my site</title>
<noscript><style type="text/css">.site {display:none;} </style></noscript>
<script type="text/javascript">
// to the head tag
// and define the hideDiv() method
function hideDiv() {
document.getElementById("noscriptmsg").style.display = 'none';
}
</script>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<div class="site">
<!--content -->
</div>
</body>
</html>
and remove the extraneous body tags. You can use css to have the first div (the one with the notice) display at 100% width and 100% height. Also, someone pointed out you were missing the css class selector.

Open spoiler on a separate page

On my website, I have to build multiple spoilers. I'm planning to use this code for creating spoilers: How to create multiple spoiler buttons.
I'm looking for an easy way to create a link 'x' on a page 'A.html' that leads to the page 'B.html' and opens the spoiler 'x' on the page 'B.html'. So the spoiler name="x" and the URL should look similar to B.html#x.
In other words, I need a table of contents on the page A.html for spoilers on the page B.html.
But if you go straight to the page B.html, all spoilers should be closed by default with an option to open and close them by clicking on the spoiler title.
Any ready-made solutions would be appreciated. The solution shouldn't necessarily be based on the code I provided above.
Ok, I know that it's totally wrong, but this is what I tried.
A.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="x" class="spoiler">Content1</div>
<div id="y" class="spoiler">Content2</div>
<div id="z" class="spoiler">Content3</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
B.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="x" class="spoiler">Content1</div>
<div id="y" class="spoiler">Content2</div>
<div id="z" class="spoiler">Content3</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".spoilerButton").click(function (e) {
e.preventDefault()
var foo=$(this).attr('href')
$(''+foo).slideToggle(1000);
});
});
</script>
</body>
Update: here's the example of what I need: https://support.google.com/plus/#topic=3049663 each section adds a unique URL ending to the link.
If you don´t like to do it over the querying the url, you need to open B.html in a new javascript window.
And there you can do something it, e. g.:
window win = window.open("B.html");
win.document.myVariable = "test";
Then you could read the variable on website B.html as you usually would do with myVariable
Edit: If you just want to load page B.html into a spoiler in page A.html then it´s just a single jquery command:
$("#spoiler").load("B.html");
I found a solution here: https://forum.jquery.com/topic/accordion-open-a-specific-tab-with-link-from-another-page
But I ended up with the accordion, instead of a set of spoilers, as I initially wanted.

Div display:none - want to only load content when it's visible

I have a series of divs with images as backgrounds, fairly large images at that, 1-2 MBs.
What I'd like to do is only load the content within them when they're visible.
(They're display:none by default and onclick of various links I use jquery to slide them down/up).
you should post your code, but I think this might be what you are looking for.
html
Link to click
<div id="imgname"></div>
jquery
$('a').click(function(){
$('div#imgname').html('<img src="image.path" />');
});
send html and slide the div block down
Link to click
<div id="imgname"><img src="image.path" /></div>
Below is a rough sketch of an idea which might work. Create hidden image tags for each of the photos you want to load, attaching onload event handlers directly. insert simply takes the image which just loaded and creates a css background rule to be inserted into the appropriate div.
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
div.placeHolder {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img data-id='imageA'
src='http://some-large-image.jpg'
style='display:none;'
onload='insert(this);' />
<div data-id='imageA' class='placeHolder' style='display:none;'></div>
<script>
function insert(img){
$img = $(img);
$div = $('div.placeHolder[data-id='+$img.attr('data-id')+']');
var cssSnippet = "transparent url("+ $img.attr('src') +") no-repeat 0 0";
$div.css('background', cssSnippet).show();
}
</script>
</body>
</html>

Categories

Resources