Hi I was doing a simple expanding slider with jquery
and somehow the slider would expand to the full-width
of the window, then shrink to the desired width I assigned it to do ..
(if you reload the page a few times, it comes up sometimes)
the problem seems to disappear switch the loading order
of the and between jquery and my external stylesheet
but I am not sure why, I am wondering if anyone knows ????
here is the code that's causing the problem
html:
<!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>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
css:
#slider{
width:10px;
height:20px;
background:#09C;
}
after switch the order of and
the expanding issue disappear:
html:
<!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>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
css:
#slider{
width:10px;
height:20px;
background:#09C;
}
Because scripts should always be loaded after static assets?
Most browsers render line by line from top to bottom so a change made on one line can be changed again on the next line.
If one loads the script first then the style will change the script.
Related
For some reason the following code (which triggers parent-page functions) will not work in IE11. Its been working fine uptil now but no longer. To note: I have tried to turn off Protected mode (which is not a solution for customers) but this didn't work either!
<!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="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
var accounts = window.opener.$('input[name="accounts_added"]');
var text = window.opener.$('#counter_$id');
$(accounts).val(parseInt($(accounts).val()) + 1);
//window.opener.$('input[name="subBtn"]').show();
window.opener.updateAjaxbox();
window.close();
</script>
</body>
I am trying to implement a lightbox in my website (http://fancyapps.com/fancybox/). I have this code in my index.php head tag.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>
And I have this javascript.
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
My main page is included in my index like this
<?php include 'pages/home.php'; ?>
And in the home.php there is this code.
<a class="fancybox" rel="group" href="images/logo.png"><h4>Title 2</h4></a>
When I click on the Title 2, it just opens a new tab with the correct image. Any idea about what is causing the problem?
check the doctype, in the fancybox website they use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
In the script below (live example is located at http://jsbin.com/aliket/1/ with source code located at http://jsbin.com/aliket/1/edit), I created two dialogs, where one (#dialog2) is a child within the other (#dialog1). If I create #dialog2 before #dialog1, open #dialog1 and then open #dialog2, the TinyMCE plugin no longer works. By not working, I mean TinyMCE's text box is shaded out and any previously entered HTML is gone. Is this a problem with the order of the two dialogs, or TinyMCE? Why is it happening? I do know how to fix it,however: just create #dialog1 before #dialog2. Thanks
<!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=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
</head>
<body>
<button id="click1">Click 1</button>
<div id="dialog1" title="dialog1"><div id="tinymce"></div><button id="click2">Click 2</button></div>
<div id="dialog2" title="dialog2">Hello</div>
</body>
<script>
tinymce.init({selector: "#tinymce"});
$(function() {
$('#click2').click(function(){$("#dialog2").dialog("open");});
$("#dialog2").dialog({autoOpen:false,resizable:false,height:300,width:240,modal:true});
$("#click1").click(function(){$("#dialog1").dialog("open");});
$("#dialog1").dialog({autoOpen: false,modal: true});
});
</script>
</html>
I think the problem here is that you did not shut down your editor instance before you opened another one with the same id. Use the mceCommand mceRemoveControl to shut such an editor instance down.
This question already has answers here:
Bootstrap 3 - Why is row class is wider than its container?
(6 answers)
Closed 3 years ago.
I have a problem with the use of Bootstrap.
The code is as follows:
<!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>Landing Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="bootstrap/css/custom.css" rel="stylesheet" media="screen">
<!-- Javascript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" id="main_header">
</div>
</div>
</body>
</html>
But the result is that the row is larger than the container.
I leave you a picture to understand what I mean
In custom.css there are only the height and the colors of the div.
The row is not larger than the container. It is caused by the responsive design, which sets row margin-left to -30px on resolutions larger than 1200px. If you not want this, add
<style type="text/css">
.row {
margin-left: 0px;
}
</style>
before </head>.
Other issues :
Your header should be
<!DOCTYPE html>
<html>
You are using an oldschool HTML4 document definition. Use HTML5 (as bootstrap docs strongly recommend. With the above, your page will go in quirksmode in IE)
Also, use an updated jquery, your page will never work with 1.3 - "on" does not exists in 1.3, and bootstrap refers to jquery on many times. Use at least 1.7.1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
I have some Dijit Tabs, and in those tabs I have some Dojo Text boxes and Fields. Some of my Dojo Tabs load when the page is loaded, and some load only when clicked on.
My issue is that I cant get the Tabs that load only when clicked, to work with the Dojo modules.
Its hard to explain, so I made a simple example to help. I have included as much around the code that I think may have any effect on the outcome.
Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
</head>
<body class="tundra">
Works Outside of a Tab: <input class="tundra" id="outsideworking" name="outsideworking" type="text" dojoType="dijit.form.DateTextBox">
<br><br><br>
<div id="tab" dojoType="dijit.layout.TabContainer" style="width:50%;height:200px" >
<div id="tab-working" dojoType="dijit.layout.ContentPane" selected="true" title="Loads on Page Load">
Test working
<input class="tundra" id="working" name="working" type="text" dojoType="dijit.form.DateTextBox">
</div>
<div id="tab-notworking" dojoType="dijit.layout.ContentPane" title="Load On Click" preload="false" parseOnLoad="false" href="loadafter.php">
</div>
<div id="tab-simplenotworking" dojoType="dijit.layout.ContentPane" title="Load On Click with Simple File" preload="false" parseOnLoad="false" href="simple.php">
</div>
</div>
</body>
</html>
loadafter.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
</head>
<body class="tundra">
Outside of a Tab
Not working here:
<input class="tundra" id="notworking" name="notworking" type="text"
dojoType="dijit.form.DateTextBox">
</body>
</html>
simple.php
<input class="tundra" id="simplenotworking" name="simplenotworking" type="text" dojoType="dijit.form.DateTextBox">
Is anyone able to help point me in the right direction?
Thanks
gggggggg
In short, if you have set parseOnLoad as false, you need to parse the html fragment by yourself. And for your tab pages, if you clicked a tab, you may need to parse the tab page manually.
For example:
<div id='a'><input id="simplenotworking" name="simplenotworking" type="text" dojoType="dijit.form.DateTextBox">
</div>
You can use dojo.parser.parse(dojo.byId("a")) to render the widget.
Btw, you do not need to attach tundra class in every places of dijit widgets, it just need to be placed at the body tag,.
Try more sophisticated selector like dojo.query to pinpoint the exact Dom you want.
if you want to select a dijit for the parser you need to do it with dijit
dojo.parser.parse(dijit.byId("a"))
if you use dojo, it will select the dom node.
if you use dijit it will select the widget