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}
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
Here is my attempt at replicating the code I have. For some reason, the code works perfectly in jsfiddle, but malfunctions with my own website. Maybe someone can somehow figure out what the issue is regardless.
http://jsfiddle.net/neowot/g0teoyrc/
So like I said, it works well in jsfiddle, but in my actual website, clicking the Button makes Div2 instantly disappear and then instantly reappear again before beginning its fade animation. Obviously this looks very bad and weird.
Does anyone have ideas as to what might be happening?
HTML
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
</body>
CSS
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
JS
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
Works for me as fiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery animate </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
</style>
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
<script>
$(document).ready(function(){
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
});
</script>
</body>
</html>
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.
I have the script in my html code. The video div is not displayed because it cant be displayed in the beginning. Any ideas why this is not sliding down and showing?
Here is the html code and java script code:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="http://code.jquery.com/jquery-latest.js">
$(document.body).ready(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown("slow");
}
else {
$("#video").hide();
}
});
</script>
</head>
<body>
<div id ="content">
<div id="header">
<h1>Software Picture</h1>
</div>
<span id="menu">
<ul>
<li>Main Tab</li>
<li>Video Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
</ul>
</span>
<div id="video"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Here is the CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#333;
}
#content
{
width:800px;
border:solid 1px #FFFFFF;
margin:auto;
}
#header
{
float:left;
margin:0px;
width:800px;
height:100px;
text-align:center;
background-color:#FFF;
}
#menu
{
float:left;
width:800px;
height:50px;
width:800px;
}
#menu ul
{
padding:0px;
list-style-type:none;
}
#menu li
{
float:left;
padding:5px 30px;
font-size:20px;
color:#FFFFFF;
border-right:solid 2px #FFF;
}
#video
{
display:none;
float:left;
width:800px;
height:500px;
background-color:#000000;
}
#footer
{
width:800px;
margin:auto;
}
Try replacing
<script src="http://code.jquery.com/jquery-latest.js">
with
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
and I think you should be fine
Your code is to show the div if it is already hidden and show if it is not visible.
Your else condition is always being executed so the video div will be always hidden.
Change the $("#video").hide(); to $("#video").fadeOut("slow"); then you can see it is going away when the dom finished loading.
IF you want to show the vide div, hide the div initially. So that it will be displayed
<div id="video" style="display:none;">
<h3>Video div content </h3>
</div>
</div>
jsfiddle sample for that : http://jsfiddle.net/uzARd/4/
Why dont you just use $("#video").slideToggle(); instead of the if else check?
and also set the display:none property initially
use seperate script tag for both like
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown('slow');
}
else {
$("#video").hide();
}
});
</script>
I'm trying to display a div with content over a 360° panorama with javascript.
It works perfect on IE, Firefox, Safari, Iphone, Ipad and android 3 (tablet) but doesn't work as it should on android mobile (2.3.3).
From my panorama I call a javascript function to fadein a div wich has an absolute position and display:none.
Here is the javascript
function ouvrirDiv(divnum){
$('#wrapper'+divnum).fadeIn("slow");}
function fermerDiv(divnum){
$('#wrapper'+divnum).fadeOut("slow");}
Here is my html
<div id="pano">
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script type="text/javascript">
// <![CDATA[
var swf = createswf("nantes.swf", "krpanoSWFObject", "100%", "100%");
swf.addVariable("xml", "nantes.xml");
swf.addParam("wmode","opaque");
swf.embed("pano");
// ]]>
</script>
</div>
<div id="wrapper1"><div id="scroller">
<div class="closetop">Fermer</div>
<div class="closebottom">Fermer</div>
<div id="tabContainer1">
<div class="tabs">
<ul>
<li id="tabHeader_1">Texte</li>
<li id="tabHeader_2">Photos</li>
<li id="tabHeader_3">Vidéos</li>
</ul>
</div>
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
Texte...
</div>
<div class="tabpage" id="tabpage_2">
Photos...
</div>
<div class="tabpage" id="tabpage_3">
Videos...
</div>
</div>
</div>
</div>
</div>
And the CSS
* {
margin:0;
padding:0;
}
#media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; -webkit-user-select:none; -webkit-text-size-adjust:none; }
#pano {
width:100%; height:100%; position:absolute; top:0px; left:0px;
}
#wrapper1 , #wrapper2 , #wrapper3 , #wrapper4 , #wrapper5 {
position:absolute;
top:0px; bottom:-60px; left:0px;
width:100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
overflow:auto;
display:none;
}
#scroller {
position:relative !important;
margin:0 auto;
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
max-width: 600px;
background:transparent;
color: #fff;
margin-bottom: 60px;
text-align: justify;
}
Here is the behaviour on default android browser: the wrapper div is opened but stays behind the panorama.
On Opera mobile the panorama can't be scrolled until you call a wrapper div, but then the wrapper is over the pano (wich is correct) but you can't scroll it, you can scroll the panorama instead...
I have really no idea of the problem...
If someone has an idea, thanx very much !!!
MY TEST PAGE iS THERE : http://www.360images.fr/nantes/nantes.html
I have this problem, too. For me adding
.hide()
before to
$('divelement').fadein
works.