The demos for the jquery ui dialog all use the "flora" theme. I wanted a customized theme, so I used the themeroller to generate a css file. When I used it, everything seemed to be working fine, but later I found that I can't control any input element contained in the dialog (i.e, can't type into a text field, can't check checkboxes). Further investigation revealed that this happens if I set the dialog attribute "modal" to true. This doesn't happen when I use the flora theme.
Here is the js file:
topMenu = {
init: function(){
$("#my_button").bind("click", function(){
$("#SERVICE03_DLG").dialog("open");
$("#something").focus();
});
$("#SERVICE03_DLG").dialog({
autoOpen: false,
modal: true,
resizable: false,
title: "my title",
overlay: {
opacity: 0.5,
background: "black"
},
buttons: {
"OK": function() {
alert("hi!");
},
"cancel": function() {
$(this).dialog("close");
}
},
close: function(){
$("#something").val("");
}
});
}
}
$(document).ready(topMenu.init);
Here is the html that uses the flora theme:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
Here is the html that uses the downloaded themeroller theme:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
As you can see, only the referenced css file and class names are different.
Anybody have a clue as to what could be wrong?
#David: I tried it, and it doesn't seem to work (neither on FF or IE). I tried inline css:
style="z-index:5000"
and I've also tried it referencing an external css file:
#SERVICE03_DLG{z-index:5000;}
But neither of these work. Am I missing something in what you suggested?
Edit:
Solve by brostbeef!
Since I was originally using flora, I had mistakenly assumed that I have to specify a class attribute. Turns out, this is only true when you actually use the flora theme (as in the samples). If you use the customized theme, specifying a class attribute causes that strange behaviour.
I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)
Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.
I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.
Try getting rid of the class attribute or using the "ui-dialog" class.
After playing with this in Firebug, if you add a z-index attribute greater than 1004 to your default div, id of "SERVICE03_DLG", then it will work. I'd give it something extremely high, like 5000, just to be sure.
I'm not sure what it is in the themeroller CSS that causes this. They've probably changed or neglected the position attribute of the target div that it turns into a dialog.
I tried implementing a themeroller theme with a dialog and tabs and it turns out that the themeroller CSS doesn't work with official jQuery! Especially for dialog and tabs, they modified the element classes from the official jquery ones. See here:
http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/
A user's comment:
3) the generated theme that I
downloaded seems to be incomplete -
when I attempt to use it my tabs
(which work with the flora theme, code
identical to the documentation
example) do not get styled as tabs
Having run into 3 I thought I was
stuck and would have to revert using
“flora"… I have since discovered by
reading the source code of the “demo”
file that if I adjust my html and give
the < li> items I’m using for my tabs
the “ui-tabs-nav-item” class then it
will work.
The theme generated by themeroller is
thus unfortunately incomplete. If the
tabs stuff is incomplete, it makes me
wonder what else is incomplete. It
was rather frustrating. :(
followed by the themeroller developers comment:
3) We’ll take a look at that. You’re right that those classes
should be added by the plugin. For now though, it probably
wouldn’t hurt much to just add them to your markup so you
can use themeroller themes.
We’ll check it out, though. I think our selectors could be
based off of the parent ui-tabs selector instead, but I think
we were trying not to use elements in our selectors. Consider
it on the to-do list
Man, this is a good one. I've tried doing a bunch of things on these two pages. Have you tried just leaving the CSS out altogether and trying both pages then? I used Firebug to remove the CSS from the header on both pages, and the input still worked on one and not on the other - but, I'm inclined to believe that Firebug doesn't completely remove the CSS from the rendering, and you'll get different results if you actually remove it from the code.
I also found that you can paste text into the text box using the mouse - it just won't accept keyboard input. There doesn't seem to be any event handler on it that would interfere with this, though.
Related
I am trying to initialize foundation tool-tip without initializing everything (i.e. $(document).foundation()) and I am failing in this simple task.
I am wondering (1) How to use new Foundation.Tooltip instead (2) do I need modernizr because documentation in foundation website did not mention modernizr as a requirement.
I mentioned modernizr because without that tool-tip would not have any styles nor html inside that would show.
Thank you
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" />
<body>
<div class="row">
<span class="has-tip" title="Tooltips are awesome, you <a>link</a> totally use them!">
Hover me
</span>
</div>
<script id="jsbin-javascript">
$(document).ready(function() {
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
// $(document).foundation();
})
</script>
</body>
</html>
To answer the second part first: Foundation 6 doesn't require Modernizr (but F5 did) (see: http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6) so you can use all of the Foundation 6 components entirely without Modernizr.
In your example I think you are mixing creating a tooltip dynamically:
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
With initialising a tooltip:
$(document).foundation(); // initialise ALL Foundation script - usually required by Foundation generally
OR
$('.has-tip').foundation() // just scripts associated with this element (e.g. tooltips)
So to create and then initialise JUST the tooltips:
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
$('.has-tip').foundation();
For obvious reasons creation must precede initialisation.
See example: https://jsfiddle.net/tymothytym/b6eoh2yg/1/
I haven't worked with foundation before so I'm definitely no expert. However, I think I've figured out why your code isn't working.
Working Code
You can get all the links needed and see an example of working code in the CodePen located here: http://codepen.io/SupposedlySam/pen/ybbYMp.
What you need to get Foundation Tooltip plugin working
Foundation.css
Modernizr.js (placed in the head tag or below all other scripts before body close (via Foundation's JavaScript Setup Page)
JQuery.js
Foundation.js
Foundation.tooltip.js (only needed if not using foundation.min.js which includes all plugins)
Weird Stuff Not Really Told To You
The tooltip will appear at the top-left of the body (at origin 0,0) if there isn't enough space for the height of the word plus the height of the tooltip.
If you want your tooltips to stay open when clicking on the word associated to it, a tabIndex must be set on the element.
If you're extending the options of a Foundation plugin you must initialize each element you want the functionality on individually.
You must use " instead of double quotes (") in html attributes and they cannot be escaped with a backslash (\).
if you do not want to initialise foundation on your entire document, you can initialise it on specifice elements, like :
$('.has-tip').foundation();
foundation do not depend on modernizer, it works without any problem without modernizer.
and a codepen to a tooltip without calling document.foundation:
https://codepen.io/faw/pen/vmZjzg
I am trying create a web page with sidr plugin & jquery. When someone click on a list item it will do something like saying which item is it.
I've created a basic html file like:
http://pastebin.com/hc4QyxW6
with calling jquery and sidr library as you can see. My css file is the one provided by sidr.
When I click on the ones on body, no problem. But when I click the items on the sidebar it jquery won't activates the click activity? How can I make the ones in sidebar work? I am looking for a solution for 5 hours. Please help :D
Thank you.
Here is My file
A few tips: your doctype is very old html5 is plainer and suited for jquery. use this:
<!doctype html>
<html>
</html>
secondly all of your css for jquery comes before the script to call jquery.and the script to actually use the jquery should be in the head of your document. if you are using jquery and jquery ui jquery must be listed first or the ui wont work. after that you should be able to link everything with the id's (the #'s withnames). like this:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
after that the javescript selectors ($document.ready function) or css id's ( #id_name {whatever-style :attribute;} ) get applied to what your want the to by id'ing them in the element you want them used in ( like div id="#demoheader" or div data-role="content" id "demoheader" or whatever.) i hope this helps.
i am no little knowledge about js and html,i have a html like:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>aa</title>
</head>
<body><input name="button" type="button" value="hello" onclick="window.location.href('http://hao.360.cn/')" />
<input name="button" type="submit" value="helio" onclick="window.open('http://hao.360.cn/')"/>
<body bgcolor="#000000">
<img src="a2.jpg" width="156" height="152" border="0" longdesc="eclipse.exe.lnk" />
</body>
</html>
i want to using js to get respectively the string http://hao.360.cn/ of the two buttons and also get the string fg726p.exe and eclipse.exe.lnk of img?
i want to using the js to get the values for android java methods. i want to get help.
edit: through some people think it is so basic,butfor me i know clue to search it
can you give me some advice and link
edit2: i adjust :
<!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=gb2312" />
<title>aa</title>
<script language="javascript">
function get(){
var xx=document.getElementById("bbs")
alert("："+xx.title);
}
function getElementName(){
var ele = document.getElementById("link1");
alert("：" + ele.href);
}
</script>
<body><input name="button" id="bbs" title="http://homepage.yesky.com/59/2673059.apk" type="button" value="hello" onclick="get()" />
<input name="button2" type="submit" value="helio" onclick="getElementName()"/>
<body bgcolor="#000000">
<img src="a2.jpg" width="156" height="152" border="0" onclick="getElementName()" />
</body>
</html>
i have solved my problem,but i donot know why somepeople post Negative Scores give me for no little js knowledge.may be you know more,think this easy. i only want to
get the sting to use,i think if you know more you only answer document.getElementById("link1").href also can help me not give me all the html document. i want to string to use for my android app, i think i donot because the small problem to study the all html. the project not give you more time
edit3:
var x=document.getElementsByTagName("input");
var el =x.item(0);
alert(el.getAttribute("value"));
alert(el.getAttribute("onclick"));
el =x.item(1);
alert(el.getAttribute("value"));
alert(el.getAttribute("onclick"));
x=document.getElementsByTagName("a");
el =x.item(0);
alert(el.getAttribute("href"));
x=el.getElementsByTagName("img");
el =x.item(0);
alert(el.getAttribute("longdesc"));
thank you #jmoreno for this answer for my frist question very good.i put answer here so that prevent the link of he give is broken .
If you are generating that HTML, be aware it has a couple of problems with it. 1) JavaScript and DOM manipulation work best when specific tags have id's, 2) the body tag is present twice.
But within the limits of what you have posted, see this jsfiddle.
The heart of it being the ...getAttribute("onclick") where given a element in the DOM, you get the required attribute (onclick, href, longdesc).
I leave it to you to parse out the sub string you want.
You code seems to be a little messed up.
You are using body 2 times. Setting the bgcolor as you do is really old fashioned, when you want to set the background color inline, which I would not recommend you to do you are doing it this way style="background-color:#000000;". You really should use an external css file. Because in my opinion HTML is for the markup and css is for the styling, and if you have to change the layout in the future you don't know if you have set the styling in the css or in the html. So try to stick one method. Also never ever use body 2 times.
Give your input fields an ID so you could easily access them via javascript, or as you tagged your question jQuery but reading through your HTML Markup, I can see that you have not included jQuery yet.
Examples of using jQuery to get the values you want. As you have seen I have edited your html markup a bit, so its cleaner and has more structure:
http://jsfiddle.net/pmjVP/
Is there an easy way to use Bootstrap in an existing project?
Currently it adds styles for table,a etc. which messes up everything in the page.
I really love the modal window, some buttons, but I don't want to hunt bootstrap css all the time to switch items back to default styles.
Bootstrap 3 // Less 1.4.0 edit:
After Bootstrap 3 and Less 1.4.0 has come out, bootstrap has started using the :extend() pseudo selector. This means that certain things will fail in the original code I've posted (you'll get some .bscnt .bscnt form-horizontal code which means you have to nest two divs inside eachother, which is just dumb). The easy way to fix this is to remove the first two lines from bootstrap.less (#import variables.less and #import mixins.less) and instead import these files outside of the .bs-cnt scope:
#import "variables.less";
#import "mixins.less";
.bscnt {
#import "bootstrap.less";
}
You can also download bootstrap from here: Bootstrap source and then enter the "less" directory and add a file called "bootstrap-custom.less" where you'll enter the following content:
.bs-cnt {
#import "bootstrap.less";
}
"bs-cnt" for BootStrap-CoNTainer. You can make it longer if you want, but remember that it'll be pasted in a lot of places in the compiled CSS, so it's to save space in the end file.
After you've done this, simple compile the bootstrap-custom.less file with your favourite less compiler (SimpLESS is pretty good if you're on Windows), and then you'll have a compiled bootstrap file that only works when you place a container element with the class of "bs-cnt".
<div class="bs-cnt">
<button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>
You can use the "customize" feature on the bootstrap website to get only those features you want: Twitter Bootstrap Download Page. Most of bootstrap's rules are explicit. You'll probably only want to leave out the reset rules which are implicit by default.
I think the link in answered section is not already updated. Here is where you can customize your Bootstrap directly on GetBootstrap site:
Customize and download - GetBootstrap
Using IFrame
Just make one html document with bootstrap in it, have your bootstrap element that you want on that page, and use Iframe to get it on the other one..
element_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Element</title>
</head>
<body>
<!--Code for the actual element-->
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<iframe src="element.html"></iframe>
<!--Other stuff on the page-->
</body>
</html>
The element in the element.html will be integrated in the index.html like it's own element, without even importing a single bootstrap stylesheet in the index.html and there is no need to make custom bootstraps, which can be tedious.
You can tag the styles you want to not get overwritten by a special tag. Just put the !important tag. It can take a long time to paste it after every line of code but it'll be worth the time. Or you can use the bootstrap.css file instead of the bootstrap link and delete all the styles that are overriding your styles. You can download the bootstrap css file here
Imagine a webpage which enables users to show an hidden element, using javascript to modify css a CSS style at runtime.
After his decision (which includes the modification of the stlyesheet) the user uses the printing functionality of his browser.
It seems that Internet Explorer does not respect the changes made in the stylesheet before during printing if the original css definition is located in an external file.
In other Browsers everything works as expected.
Please have a look at the example below, which changes a style class from its initial definition display:none to display:inline at runtime hence the element will be displayed.
But when printing this page, the element remains hidden in internet explorer (tested with IE 6,7,8).
Do you have a solution or workaround?
Minimalistic example (html file):
<html><head>
<LINK rel="stylesheet" type="text/css" href="minimal.css">
</head><body onload="displayCol();">
<script>
function displayCol()
{
var myrules;
if( document.styleSheets[0].cssRules ) {
myrules = document.styleSheets[0].cssRules;
} else {
if ( document.styleSheets[0].rules ) {
myrules = document.styleSheets[0].rules;
}
}
myrules[0].style.display = "inline";
}
</script>
<div class="col0" id="test">This is hidden by default.</div></body></html>
minimal.css
.col0 {
display:none;
}
UPDATE:
Please note that the decision if the object should be displayed or not is made by the user - it's not known at runtime!
Have you considered using the media=print way of getting the browser to use a stylesheet specifically for printing?
<link rel="stylesheet" href="print.css" media="print" />
If the css changes you are making are always the same, i.e. you can technically store them on a separate css file, then you can use this.
For non-static CSS, in IE (not sure about other browsers/later versions of IE), you could consider using the onbeforeprint event.
See here: http://www.javascriptkit.com/javatutors/ie5print.shtml
Instead of using javascript to change the stylesheet rules, use scripting to apply and remove classes to the elements that need to be displayed. Remember that an element can have more than one class applied to it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Demo</title>
<style type="text/css">
.col0 {display:none;}
div.showCol {display: inline;}
</style>
<script type="text/javascript">
function displayCol() {
document.getElementById("test").className += " showCol";
}
</script>
</head>
<body onload="displayCol();">
<div class="col0" id="test">This is hidden by default.</div>
</body>
</html>
This answer to another question does a great job laying out different ways to do this with scripting: Change an element's class with JavaScript
You could try using a specific style sheet for printing, for example:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
EDIT - too slow :)
Javascript is not being evaluated when printing. It will look just like when Javascript is turned off. You need an extra media=print stylesheet and make any necessary changes there.
If that is not an option, you could create a link that will generate a static page that will look like it's supposed to for that particular user.
Based off your example scenario - in your style sheet add:
.col0 {
display: none;
}
body.showColumn .col0 {
display: inline;
}
Then simply toggle the .showColumn class on your body, and the column's visibility will be toggled accordingly.