below are 2 html pages ,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Commision </title>
<script type="text/javascript" src="JS/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function loadpage(x)
{
$('#centre').empty().load(x, function () {
window.alert('Request complete');
});
}
</script>
<style type="text/css">
<!--
#main {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1;
}
#header {
position:absolute;
left:0px;
top:0px;
background:url(Images/header1.png);
-moz-background-size: auto, cover; /* Firefox 3.6 */
background-size: auto, cover; /* Chrome, Firefox 4.0+, Safari 4.1+, Opera 10+ and IE9 */
width:100%;
height:14%;
overflow: hidden;
z-index:250;
}
#centre {
position:absolute;
left:0px;
top:14%;
width:100%;
height:82%;
z-index:240;
}
#smoothmenu1 {
position:absolute;
right:0px;
width:40%;
bottom:0px;
height:26px;
overflow: hidden;
z-index:220;
}
#footer {
position:absolute;
left:0px;
bottom:0px;
width:100%;
height:4%;
overflow: hidden;
z-index:2;
}
.com {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#cntr {
position:absolute;
left:0px;
top:-1px;
width:100%;
height:100%;
z-index:50;
}
#insideCentre {
position:absolute;
left:0px;
top:10%;
width:100%;
height:90%;
z-index:12;
}
#initProfile {
position:absolute;
left:0px;
top:0px;
width:70%;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:14px;
height:100%;
z-index:14;
}
.aFont
{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:20px;
color:#FFF;
padding-top: 2px;
}
#aboutMSL {
position:absolute;
left:0px;
top:0px;
width:100%;
height:10%;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
background:url(Images/gclip.png);
overflow: hidden;
z-index:18;
}
#aboutBody {
position:absolute;
left:0px;
top:14%;
width:100%;
height:86%;
border-right-color:#666;
border-left-style:dotted;
overflow: hidden;
border-left-width:thin; z-index:23;
}
#tech {
position:absolute;
top :50%;
right:0px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px; width:30%;
height:30%;
z-index:19;
}
#tech_header {
position:absolute;
left:0px;
top:0px;
width:100%;
height:30%;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
background:url(Images/gclip.png);
overflow: hidden;
z-index:20;
}
#tech_body {
position:absolute;
left:0px;
bottom:10%;
width:100%;
height:50%;
z-index:21;
overflow: hidden;
}
.sFont {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#sShow {
position:absolute;
top:0px;
right:0px;
width:30%;
height:40%;
z-index:51;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="header">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li>A</li>
<li>S</li>
<li>C</li>
<li>Commx</li>
<li>V</li>
</ul>
<br style="clear: left" />
</div>
</div>
<div id="centre">
</div>
<div id="footer" align="center" class="com" >Commision</div>
</div>
</body>
</html>
and
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#top {
position:absolute;
left:0px;
top:0px;
width:100%;
height:10%;
background:url(Images/gclip.png);
z-index:3;
}
#c1 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:25px;
overflow:hidden;
margin-top:25px;
z-index:5;
border-bottom: 0.5px solid #778;
}
</style>
</head>
<body>
<div id="PCentre">
<div id="c1">Column 1</div>
<div id="Pbody"></div>
</div>
</body>
</html>
I'm trying to load the 2nd html page into centre div of 1st html page using query , the application works fine in firefox but not in chrome , in chrome the div elements in page 2 are not getting placed as they were when i ran this application in firefox (i tried to run the application from localhost/127.0.0.1)
My suggestion is to load the particular wrapper div inside:
<ul>
<li>A</li>
<li>S</li>
<li>C</li>
<li>Commx</li>
<li>V</li>
</ul> //-----------------------------------^^^^^^^^----------this one
Quoting the jQuery API:
Loading Page Fragments
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
We could modify the example above to use only part of the document that is fetched:
$('#result').load('ajax/test.html #container');
You'll want to give the <body> of the second page an ID, and reference this ID in your call to load in order to insert the contents of the body into your <div>, rather than inserting an entire HTML page into the <div> which results in invalid HTML.
The comment by #shnisaka is correct - the fact that you are trying to load a complete page, doctype and all, into another page inherently suggests that you are trying to load a stand-alone page into another stand-alone page. The only way to do this, while maintaining the independence of each page is to use an iFrame. If this is not your intention, you may want to re-think your IA.
If your goal is to simply extract some particular section(s) of the document, e.g. the body and stylesheets, then the best practice would be to extract those nodes/elements and insert them. However, this will also open your page up to potentially conflicting stylesheets and/or scripts.
This issue can be resolved as-is via a code solution, but I highly recommend that you take a look at what you are doing, think about what your goal is, and consider the potential issues from a compatibility, extensibility, and maintainability standpoint.
Related
I'm trying to make a mobile/tablet website. I don't know why on my phone this thing happen:
But then.. when I open the sidebar:
I don't know why the body resizes itself. The content <div> moves to the right when the menu opens on the mobile. I want it to stay underneath the menu, so that the menu is on top of it.
Here's the HTML and CSS:
#charset "utf-8";
/* CSS Document */
body {
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
overflow-y:hidden;
}
#sidebar {
width:250px;
height:100%;
position:absolute;
background-color:#2a2a2a;
border-right:1px solid #1d1d1d;
}
#sidebar ul {
list-style:none;
padding:0;
margin:0;
}
#sidebar a {
display:block;
color:#fff;
text-decoration:none;
padding:0px 10px;
border-bottom:1px solid #1d1d1d;
transition:all 0.3s;
height:55px;
line-height:55px;
}
#sidebar a:hover {
background-color:#444;
}
#content {
width:100%;
height:100%;
position:absolute;
background-color:#fff;
transition:all 0.3s;
}
#menu {
position:relative;
width:100%;
height:56px;
box-sizing:border-box;
border-bottom:1px solid #CCC;
line-height:56px;
}
#menu span {
cursor:pointer;
font-size:30px;
width:55px;
height:56px;
background-color:#445A87;
color:#fff;
display:block;
text-align:center;
line-height:56px;
}
.open {
margin-left:251px;
}
#logo {
position:absolute;
right:50%;
top:0px;
margin-right:-80px;
height:55px;
width:160px;
font-size:24px;
color:#282828;
background:url(../../img/Logo.png);
background-size:cover;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baby & Home · Servicio doméstico · Limpieza industrial<</title>
<link href="css/styles_min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="css/icons.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="sidebar">
<ul>
<li>Inicio</li>
<li>Quiénes somos</li>
<li>Doméstico</li>
<li>Industrial</li>
<li>Promociones</li>
<li>Ofertas de empleo</li>
<li>Contacto</li>
</ul>
</div>
<div id="content">
<div id="menu">
<span id="open_sidebar" class="icon-list2"></span>
<div id="logo"></div>
</div>
</div>
<script type="text/javascript">
$("#open_sidebar").click(function(){
$("#content").toggleClass("open");
if($("#open_sidebar").hasClass("icon-list2")) {
$("#open_sidebar").removeClass("icon-list2");
$("#open_sidebar").addClass("icon-cross");
}
else {
$("#open_sidebar").addClass("icon-list2");
$("#open_sidebar").removeClass("icon-cross");
}
});
</script>
</body>
</html>
Thanks!
(I should say that in a web browser on a PC this works fine! Why not on a phone?)
<div id="content"> contains the images, and moves right, but you do not want it to. This is the cause of the layout problems. The code which controls this is applied to **all* screen sizes but only looks bad on tiny ones:
.open { margin-left:251px;}
You can delete this line to stop the <div id="content"> moving 251px to the right - but the images and text would still be too big for the screen - and the menu would take up too much of the screen.
A better idea would be to make your code more responsive. Add this to your CSS - this will make the menu text and menu size smaller for screens 600px or less
#media only screen and (max-width:600px)
{
#sidebar {
width: 150px;
margin:0; padding:0;
font-size: 12px;
}
}
This is called a media query and screens larger than 600px will stay the same. You can add to it, for example line-height:1.1em means each line is 1.1 characters wide
I have been learning Jquery and i made a small banner that animates out, and back in giving information. But, i would like it to be on a timed loop; ie. It runs the animation every 5 mins.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
do {
var i = 1
$(document).ready(function(){
$("#twitter").delay(200).animate({left:'225px'}, "slow").delay(5000).animate({left:'-225px'}, "slow");
$("#tag_line").delay(300).fadeIn(2000).delay(2500).fadeOut(1000);
$("#content").delay(1000).slideDown("slow").delay(3000).slideUp("slow");
var box=$("#box");
box.animate({width:'toggle'},"normal").delay(500);
box.animate({height:'180px'},"slow").delay(3000);
box.animate({height:'100px'},"slow").delay(750);
box.animate({width:'toggle'},"normal").delay(3000);
});
}
while (i < 2)
</script>
<style>
#twitter
{
height:100px;
width:140px;
position:absolute;
z-index:20;}
#box
{
background:lightgrey;
height:100px;
width:350px;
opacity:0.2;
display:none;
position:absolute;
z-index: 10;
border-style: outset;
border-width: large;
border-color: black;
}
#container {
width: 100px;
height: 100px;
position:absolute;
}
#tag_line {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic";
color: red;
}
#content {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
padding-top:90px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic"
}
</style>
<title>Test Jquery</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="tag_line"><h1>Twitter</h1></div>
<div id="twitter"><img src="img/logo/twitter.png" width="140" height="100"></div>
<div id="content"><h2>#Geekster_Alan</h2></div>
<div id="box"></div>
</div>
</body>
</html>
How would i get it too loop?
Also, if you see anything wrong with the general code it would be appreciated if you point it out! I am new to Jquery, JS and HTML/CSS so positive criticism will help me learn!
Thanks!
You can use the setInterval function to execute your code every X ms
See details here: http://www.w3schools.com/js/js_timing.asp
I'm on a mac, and when I double-click the html file, it opens a photo that I'm using in Preview. If I "open with" Google Chrome, then the picture opens in it's own tab. The html file itself loads and functions correctly, and the picture appears just as it should. I just have NO CLUE why it also opens the picture file in a new tab(Chrome) or Preview(safari).
html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src="jQuery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id=top>
<h1>Lamborghini</h1>
</div>
<div id=navbar>
<div id=navlink> Home </div>
<div id=navlink> Photos </div>
<div id=navlink> Videos </div>
<div id=navlink> About Us </div>
<div id=navlink> Contact </div>
</div>
<div>
<div id=leftpanel></div>
</div>
</body>
</html>
Javascript
if(typeof jQuery === "undefined")
{console.log("jQuery is not loaded.")}
else
{console.log("jQuery is loaded.")}
$(document).ready(
$(document).scroll(
function()
{$("div").fadeTo(1000,1)}
)
);
I'm doing everything locally (just a beginner learning), and I have a jQuery database linked. Not sure if any of that is important.
CSS
body
{opacity:0}
.fade2
{opacity:1;
position:fixed;
z-index:-1;
width:100%;
opacity:0}
div#navbar
{height:50px;
width:100%;
opacity:0;
border-radius:7px;
background-color:rgba(0,150,255,0.8);
margin:auto;
overflow:hidden}
div#navlink:hover
{background-color:rgba(0,105,180,0.6)}
div#navlink
{width:20%;
display:inline-block;
border:1px solid black;
height:100%;
margin:0;
float:left;
text-align:center;
box-sizing:border-box;}
a
{text-decoration:none;
color:white;
position:relative;}
#top
{text-align:center;
height:544px;
background:url("Lambo2.jpg") bottom no-repeat;
background-size:100%;
background-color:white;
margin:0px;
margin-top:-45px;
width:100%;
background-color:transparent;
opacity:0.9}
h1
{position:relative;
font-size:4em;
top:.38em;
color:black;
font-family:cursive;
text-align:left}
#leftpanel
{height:1000px;
width:45%;
margin-left:4%;
margin-top:1%;
float:left;
background-color:rgba(0,150,255,1);
opacity:0}
span
{position:relative;
top:1em}
I need to be able to have a side panel that fills the height of the page on the left and a map filling the rest of the page on the right. I would like the side panel to have a width of 300px, regardless of the size of the browser with the map to the right of it. Also, I am not able to move any of the divs within #panel, they are all just aligned one after the other. Here's my css:
body {margin:0;}
#panel {height:100%; width:300px; position:absolute; padding:0;background-color:#8C95A0;}
#div1 {padding:2px; text-align:center}
#div2 {padding:2px; text-align:center}
#div3 {padding:2px; text-align:center}
#div4 {padding:2px; text-align:center}
#div5 {padding:2px; text-align:center}
#div5a {padding:2px; text-align:center}
#div5b {padding:2px; text-align:center}
#div5c {padding:2px; text-align:center}
#div6 {padding:2px; bottom:0px; text-align:center}
#map_canvas {height:100%; width:1200px; left:300px; position:absolute; padding:0;}
How can I make #map_canvas fill the rest of the page and how can I move my divs?
<html>
<head>
<style>
html,body { padding:0; margin:0; height:100%; }
#panel { background-color: #DDD; position:absolute; top:0; left:0; bottom:0; width:300px; }
#map_canvas { background:red; position:absolute; top:0; left:300px; right:0; bottom:0; }
</style>
</head>
<body>
<div id="panel"></div>
<div id="map_canvas"></div>
</body>
</html>
I was able to fix the two problems I enquired about in my question. Firstly, I was able to use relative positioning to move my divs around in the side panel instead of absolute. Secondly, I used the following css to make the map fill the rest of the screen, to the right of the side panel:
#map_canvas {height:100%; left:300px; right:0px; position:absolute; padding:0; margin:0;}
I want to autoscroll a particular element either onmouseover or using an image map. I also want to hide the scrollbars for that div. The problem is...
I don't understand how to do this. I've been learning javascript for weeks now and I've only learned the useless parts. Nothing actually applicable to web design, that is. I did google it and nothing gave me the exact answer I was looking for, nor was I able to tweak those examples to work for me.
The code is on jsfiddle.net unless I'm breaking an unwritten rule, and please just let me know, I will just post the link. Please please please! don't just give me an answer, as I am a beginner. Please explain your solution. Thank you so much!
http://jsfiddle.net/thindjinn/KQP9t/2/
Decided to add the code, because I've gotten immediate responses before when doing that.
<!DOCTYPE html>
<html>
<title>Scrolling Pictures</title>
<head>
<link rel="stylesheet" type="text/css" href="scrollingPictures.css" />
<script src="/scrollingPictures.js"></script>
</head>
<body>
<div class="mask"></div> <!-- White behind images, to keep color consistent when low transparency -->
<div id="scroll">
<img class="left" id="image1" src="http://www.yalibnan.com/wp-content/uploads/2011/02/steve-jobs1.jpg" alt="Steve Jobs"/>
<img class="left" id="image2" src="http://www.power-of-giving.com/image-files/achievements-of-richard-branson.jpg" alt="Richard Branson"/>
<img class="left" id="image3" src="http://static5.businessinsider.com/image/4b16d0c70000000000134152/anderson-cooper.jpg" alt="Anderson Cooper"/>
<img class="left" id="image3" src="http://swandiver.files.wordpress.com/2009/03/rachel-maddow.jpg?w=288&h=371" alt="Rachel Maddow"/>
<img class="left" id="image3" src="http://img2.timeinc.net/people/i/2006/celebdatabase/kanyewest/kanye_west1_300_400.jpg" alt="Kanye West"/>
<img class="left" id="image3" src="http://img1.browsebiography.com/images/gal/2627_Larry_Page_photo_1.jpg" alt="Larry Page"/>
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
<div id="work"><div class="panel">Work</div></div>
<div id="education"><div class="panel">Education</div></div>
<div id="skills"><div class="panel">Skills</div></div>
<div id="footer"> Home <!-- Beginning of Footer -->
Privacy Statement
Contact Us
Careers
More Info
</div>
</body>
</html>
body{
overflow:hidden;
margin-left:0;
margin-top:0;
}
div#scroll{
border-right:1px solid orange;
position:absolute;
z-index:2;
float:left;
width:200px;
height:100%;
overflow:auto;
overflow-x:hidden;
}
img.left{
z-index:inherit;
float:left;
width:200px;
min-height:200px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:200px; /* for IE5.x and IE6 */
opacity:0.4;
filter:alpha(opacity=40);
}
#image1, #image2, #image3{
width:200px;
}
img.left:hover{
opacity:1;
}
div.gradientTop{
position:absolute;
margin-top:0;
z-index:2;
width:206px;
height:30px;
float:left;
background:-webkit-linear-gradient(rgba(255,255,255,2), rgba(255,255,255,0))
}
div.gradientBottom{
position:absolute;
margin-bottom:50px;
z-index:2;
width:206px;
height:120px;
float:left;
bottom:-210px;
background:-webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))
}
.panel{
font-size:2em;
padding-right:5%;
padding-top:7%;
height:100%;
}
#work{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#fff;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#education{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#fff;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#skills{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#ffe;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#work:hover,#education:hover,#skills:hover{
z-index:0;
background-color:#f0f0f9;
border-top:1px solid #d0d0d0;
border-bottom:1px solid #e0e0e0;
}
#work:active,#education:active,#skills:active{
z-index:0;
background-color:#ededf2;
border-top:1px solid #d0d0d0;
border-bottom:1px solid #e0e0e0;
}
div.mask{
position:relative;
z-index:1;
margin-top:5px;
float:left;
width:206px;
height:805px;
background-color:white;
}
#footer {
background:white;
z-index:3;
position:absolute;
font-variant:normal;
text-indent:5%;
color:#333;
clear:both;
height:50px;
padding-top:20px;
}
How do hide scrollbars:
Set the css property overflow to hidden on the div:
<div style="overflow:hidden"></div>
How to scroll the div:
The element has a scrollTop property, which is the amount of pixels the element has been scrolled. You can scroll the element by assigning to this property:
var div = document.getElementById(someId);
div.scrollTop = 50;
How to do something on mouseover:
var div = document.getElementById(someId);
div.onmouseover = function() {
// do something here
};
Chech this page:
http://valums.com/vertical-scrolling-menu/
And this is the sample.
http://valums.com/files/2009/vertical-menu/final.htm
Good luck