Sidr Click Action Jquery - javascript

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.

Related

How to make a button that uses a custom asset and links to another page

I am new to CSS, HTML, and JS but I hope to learn more as I progress through developing my portfolio site. Currently I am trying to put custom buttons I designed on my site, that link to another page. I have the button zero and click state working, but I'm not 100% sure how to make it so that button can be used to link to another page on my site.
Here is the code so far.
<html>
<head><title>button</title>
<style>
div.butn{
background-image:url("https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/59640885b3db2b282c21c56e/1499728005971/zero_state%40300x-8.png#import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700");
width:555px;
height:170px;}
div.butn:active{
background-image:url("https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/5964090b6b8f5bf77b28504f/1499728139538/hover_state%40300x-8.png");
width:555px;
height:170px;}
</style>
</head>
<body>
<div class="butn"></div>
</body>
</html>
Any help is appreciated, sorry in advance for any noobie mistakes xD
I'd advise you to stick with semantic HTML, i.e. use proper tags for what you are trying to convey. In your example you want a button to act like a hyperlink to another URL, so why don't you use the anchor tag which was made for exactely that purpose?
Let's see how we can improve things a bit:
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<style>
.butn {
background-image:url(.../plain.image");
width:555px;
height:170px;
}
.butn:active{
background-image:url("../active.image");
}
</style>
</head>
<body>
<p><a class="butn" href="https://..." title="Show this text on hover">Go to YouTube</a></p>
</body>
</html>
So, what has changed besides the use of the anchor tag? Quite a lot, actually:
I chose a proper character set (UTF-8 should be fine for most about everything)
I lowered your CSS rule's specificity (you may read up on as to why this is !important (no pun intended) on Smashing magazine)
I used an anchor tag <a> to properly mark up the hyperlink
I got rid off the superfluous CSS properties within the .btn:active rule (see CSS-Tricks to learn all about how styles are cascaded)
and last but not least, I properly aligned your code (call me pedantic but missaligned code makes it more difficult to read and hinders your thought process)
There's a lot more ground to cover but this should be enough to keep you occupied for the next two weeks. Keep asking!

include an HTML page in an HTML page

I have a website and I want to use my dropdown menu as a separate code from any links in website.
http://www.stelianpopa.ro/photo/ancar.html
I use the code for my menu in menu.html and I integrated on website based on this example: http://api.jquery.com/load/
The codes are loaded but most of the time the drop menu doesn't work, even if appear to be loaded, it shows only the first line and not the submenu for "photo" and "video"
Any help for that?
Basically wat I want is to have my menu as an independent file and to be loaded on any html on my website as a reference, because when I want to add something in the menu I had to do it on every single html and that's why I want to be standalone, to modify once for every html.
Sorry for my bad english.
If not already, make a html file that includes your menu (dropdown).
Then, on every page that you want to use the menu, include an iframe pointing to the html file you created for your menu.
For example:
Menu.html
<html>
<head></head>
<body>
<!-- code for menu -->
</body>
</html>
Every page you want to use the menu on
<html>
<head>...</head>
<body>
<!-- content -->
<iframe src='path/to/menu.html'>Sorry, but your browser does not support iframe.</iframe>
</body>
</html>
Hope this works for you.
Without templating, you can use javascript to load template onto the page. I would set up a mini project for this to avoid copy-pasting, but the basics are below
In the body where you want the menu:
<div id="my-nav-menu"></div>
script:
document.addEventListener('DOMContentLoaded', function() {
var menu = document.getElementById('my-nav-menu');
menu.innerHTML = 'menu html here';
});
Update
I just noticed the jquery tag, so you can use the following script instead:
$(document).ready(function() {
$('#my-nav-menu').html('menu html here');
});

Is it possible to use Bootstrap without it taking over the entire style?

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

jQuery SimpleTip to generate tooltips over a table

I am using SimpleTip to generate a tooltip when the user hovers over a cell in a table. The tooltip shows, but it expands the size of the cell. How can I make it hover over the cell without changing its size?
Here's what I currently have:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.simpletip-1.3.1.js"></script>
</head>
<body>
<table border="1">
<tr><td id="test">foobar</td></tr>
</table>
<script type="text/javascript">
$("#test").simpletip({
fixed: true,
content: 'hello world!'
});
</script>
</body>
</html>
I recommend you using qTip (the successor to Simpletip) and it works with your case
Try this:
http://jsfiddle.net/ynhat/PydCK/
Looks like you're using "simpletip" and not qTip in your code. That may be the reason why. What browser are you using? It's possible you might be using IE and without the right doctypes your page won't display properly.
I'll have to run your code and test it.
The reason is that SimpleTip does not use use a holder element like most other libraries. It rather puts the tooltip inside the tooltipped element. This works for some basic layouts but it does not work for others – especially ones that use relative/absolute positioning of elements.
So the solution is as proposed: Try it, if it doesn't work with your layout, try some other library.
Actually I have forked a tooltip based on SimpleTip 1.3.1 which has this issue fixed. I will be releasing it in a while. You probably have solved your problem in the meantime, though. :)

A issue with the jquery dialog when using the themeroller css

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.

Categories

Resources