I need to create a tabbed menu on a Drupal website. The drupal installation is a good ould Drupal 4.7. In order to create tabbed menu I use tabify plugin for Jquery. The problem is that I cannot get it working. It seems that the Jquery doesn't load. I put the code (below) on the website where I would like to have the menu. It didnt work. Then I put it on the main drupal page and on every template file. Not working either. What is the cause of that? Any advice appreciated. Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.tabify-1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function () {
$('#tabbed_menu').tabify();
});
// ]]>
</script>
<ul id="tabbed_menu">
<li class="active">Treatment</li>
<li>Prices</li>
<li>FAQ</li>
</ul>
<div id="description" class="content">
some text
</div>
<div id="usage" class="content">
<h2>Prices</h2>
some text
</div>
<div id="download" class="content">
some text
</div>
And CSS:
#tabbed_menu{ padding: 0;}#tabbed_menu LI{ display: inline;}#tabbed_menu LI A{ background: #EDF; padding: 10px; float: left; border-right: 1px solid #CCF; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}#tabbed_menu LI.active A{ background: #E07; color: #FFFFFF;}.content_tabbed{ float: left; clear: both; border: 1px solid #CCF; border-top: 1px solid #CCF; border-left: 1px solid #CCF; background: #FFF; padding: 10px 20px 20px; width: 100%; border-bottom: 1px solid #CCF;}
its because the jquery u have loaded on is the core jquery, u need the jquery ui :) and make sure that <script> is above other codes where you call the tabify, :)
Related
I'm fairly new to Javascript, and i've reached an issue I can't figure out yet, so I'll explain it as best as I can.
I've got 2 divs containing a reply link with the same ID, OnClick. Only difference is the data-attribute which I thought could be used to differentiate the two. There are 2 reply divs that are styled to be hidden. The aim is once the reply link is clicked, the correct div will display below it.
The issue is, when you click any of the two Reply links, it only opens the first reply div below the first parent div. I'll created a little example to give a better understanding:
// Opens reply div and retrieves data-attribute (reply_id) to insert into MYSQL database
function replyLink(element) {
document.getElementById('reply').style.display = "block";
}
// Close div link, displays after opening reply box
function closeLink() {
document.getElementById('reply').style.display = "none";
}
#comment{
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
#comment #content{
border: none;
padding: 15px;
font-size: 12px;
}
#comment #link{
border: none;
padding: 5px;
margin-top: 5px;
}
#comment #link a{
border: none;
text-decoration: none;
font-size: 12px;
color: blue;
}
#comment #link a:hover{
border: none;
text-decoration: underline;
font-size: 12px;
color: blue;
}
#reply{
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div id="comment">
<div id="content">
Content #1
</div>
<div id="link">
<a href='javascript:void(0);' onclick="replyLink()" data-test='1'>Reply</a>
</div>
</div>
<div id="reply" style="display: none;">
reply container 1
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
<div id="comment">
<div id="content">
Content #2
</div>
<div id="link">
<a href='javascript:void(0);' onclick="replyLink()" data-test='2'>Reply</a>
</div>
</div>
<div id="reply" style="display: none;">
reply container 2
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
Would a java genius be able to help me out.
You can use the classes for styling and IDs with indexes to identify the unique div boxes.
Here is the working example
function replyLink(index) {
document.getElementById('reply_' + index).style.display = "block";
}
// Close div link, displays after opening reply box
function closeLink(index) {
document.getElementById('reply_' + index).style.display = "none";
}
.comment {
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
.comment .content {
border: none;
padding: 15px;
font-size: 12px;
}
.comment .link {
border: none;
padding: 5px;
margin-top: 5px;
}
.comment .link a {
border: none;
text-decoration: none;
font-size: 12px;
color: blue;
}
.comment .link a:hover {
border: none;
text-decoration: underline;
font-size: 12px;
color: blue;
}
.reply {
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div class="comment">
<div class="content">
Content #1
</div>
<div class="link">
<a href='javascript:void(0);' onclick="replyLink(0)" data-test='1'>Reply</a>
</div>
</div>
<div class="reply" id="reply_0" style="display: none;">
reply container 1
<a href='javascript:void(0);' onclick='closeLink(0)'>[Close]</a>
</div>
<div class="comment">
<div class="content">
Content #2
</div>
<div class="link">
<a href='javascript:void(0);' onclick="replyLink(1)" data-test='2'>Reply</a>
</div>
</div>
<div class="reply" id="reply_1" style="display: none;">
reply container 2
<a href='javascript:void(0);' onclick='closeLink(1)'>[Close]</a>
</div>
While the use of an id is straightforward when first working with JavaScript and HTML, it's use is discouraged as an anti-pattern. IDs make for brittle code (as you are seeing here) and don't scale well. Instead, don't use ids at all and instead use classes or a relative reference to the elements, such as this, .closest(), nextElementSibling, parentNode, etc.
Also, using hyperlinks as a "hook" to initiate some code upon a click event is semantically incorrect. Hyperlinks are for navigation and people who use screen readers will have difficulty navigating your page. Just about every visible HTML element supports a click event, so just attach a click handler directly to the element instead of wrapping the element with a hyperlink.
Lastly, there is no need for separate show and hide functions. Just add or remove a "hidden" class based on what was clicked.
You can see in my answer how much cleaner the HTML and JavaScript are without ids.
See comments inline below.
// Set up a single event handler for any clicks to any reply or Close
document.addEventListener("click", function(event){
// Check to see if the click originated at a Reply element
if(event.target.classList.contains("reply")){
// Find the closest ".comment" ancestor of the clicked reply
// element and then get the next element sibling to that and
// unhide it.
event.target.closest(".comment")
.nextElementSibling.classList.remove("hidden");
} else if(event.target.classList.contains("replyContainer")){
event.target.classList.add("hidden");
}
});
.hidden { display:none; }
.comment{
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
.comment .reply{
padding: 5px;
margin-top: 5px;
}
.replyContainer{
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div class="comment">
<div class="content">Content #1</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 1[Close]</div>
<div class="comment">
<div class="content">Content #2</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 2[Close]</div>
<div class="comment">
<div class="content">Content #3</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 3[Close]</div>
The code below is not workING in my application
HTML:
<div class="progressBar">
<div class="progressBarIndicator">
</div>
</div>
CSS:
.progressBar{background-color: #fff; height:20px;}
.progressBarIndicator{background-color: #000; height:20px;}
JAVASCRIPT:
$('.progressBarIndicator').css({"background-color" : "red"});
First Check, whether jquery.min.js is present or not.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If yes, change your script like this way.
<script>
$(document).ready(function(){
$('.progressBarIndicator').css("background-color","red");
});
</script>
$('.progressBarIndicator').css({"background-color" : "red"});
^ ^ ^
remove replace with comma Remove
For more info, check this Jquery CSS Method - W3 Schools & Background CSS Using Jquery - Web Developer Forum
My Updated Code. Do the needful changes if required.
<html>
<head></head>
<body>
<style>
.progressBar{
width: 100%;
height: 20px;
background: #fff;
border-radius: 2px;
border: 1px solid rgba(199, 197, 197, 1);
}
.progressBarIndicator{
height: 20px;
background: #019F45;
overflow: hidden;
border-radius: 2px;
}
</style>
<div class="progressBar">
<div class="progressBarIndicator">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.progressBarIndicator').css("background", "red");
});
</script>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
HTML:
<div class="progressBar">
<div class="progressBarIndicator">
</div>
CSS:
.progressBar{
width: 100%;
height: 20px;
background: #fff;
border-radius: 2px;
border: 1px solid rgba(199, 197, 197, 1);
}
.progressBarIndicator{
height: 20px;
background: #019F45;
overflow: hidden;
border-radius: 2px;
}
JAVASCRIPT:
$(document).ready(function(){
$('.progressBarIndicator').css("background", "red");
});
Moving a li element into a ul HTML list with jQuery UI Sortable does not work with jQuery Mobile (dragging works, but the ul does not accept the li element). If you comment the line where jQuery Mobile is imported, it will work. If you un-comment it again, it will stop working. But I need jQuery Mobile for my project. Furthermore, the shape of the element being dragged changes as you lift it (Firefox 29).
You can find a screenshot of the HTML file here.
Context: I'm working on a hybrid / web app using jQuery Mobile. It's an educational app and in one exercise type, the user has to drag some terms into the right list but placing the term in the list doesn't work because the list doesn't accept the new li tag. I simplified the scenario so that there is only one term to move into one list.
<html>
<head>
<title>jQueryUI Sortables</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- remove this line and the example will work (Firefox) -->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!-- but I need jQuery Mobile in my project! -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
$(function() {
$("#part_0").sortable({
connectWith: "#col_0"
});
$("#col_0").sortable({
connectWith: "#part_0"
});
});
</script>
<style>
li { margin: 0px; padding: 10px; float:left; border-radius: 5px; }
.smallList {list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.bigList {width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.part {margin: 0px; padding: 10px; border-radius: 5px; background-color: Orange; color: White;}
</style>
</head>
<body>
<ul id="part_0" class="smallList">
<li class="part">Drag this</li>
</ul><br /><br /><br /><br />
<ul id="col_0" class="bigList">
<li class="part">Into</li>
<li class="part">This</li>
<li class="part">List</li>
</ul>
</body>
</html>
After days of trying, I finally found a work-around. I don't know why, but with jQuery Mobile, you need to set the ul tag to float: left which is not necessary, if you use jQuery UI without jQuery Mobile. I don't think it's obvious, but adding this single line into the CSS makes the dragging work again:
<style>
/* BEGIN INSERTION: */
ul { float: left; }
/* END INSERTION */
li { margin: 0px; padding: 10px; float:left; border-radius: 5px; }
.smallList {list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.bigList {width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.part {margin: 0px; padding: 10px; border-radius: 5px; background-color: Orange; color: White;}
</style>
I want to create a drop down menu (alternate to Browswer's <select> tag).
So Here I've created a <div> in another <div> to stimulate the <select>
But When I expand the dropdown <div> automatically parent <div> also expands making structure of page very dirty.
I mean, Here is output of my actual code:
When I click on Expand The Result Is:
But I want output, When I click on Expand like:
Here is My Code:
<html>
<head>
<title>Drop Down Demo</title>
<style type="text/css">
.ddown{
width:250px;
min-height: 25px;
background: #aaa;
border: 2px solid #777;
color: #444;
text-align: center;
margin: 0px;
display: inline-block;
}
.ddown a{
display: none;
width: 100%;
height: 25px;
text-align: left;
color: #666;
text-decoration: none;
background: #ddd;
border: 1px solid #999;
}
.ddownHead{
display: inline-block !important;
}
.ddownItem{
display: inline-block !important;
}
.ddownItem:hover{
background: #33a;
color: #fff;
}
.ddown_busy{
background: #77a !important;
border: 1px solid #558 !important;
color: #fff !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function toggle_expand_ddown(x){
if($(x).closest("div").find("a").eq(0).hasClass("ddown_busy")){
$(x).closest("div").find("a").eq(0).removeClass("ddown_busy");
$(x).closest("div").find("div").each(function(){
$(this).find("a").each(function(){
$(this).removeClass("ddownItem");
});
});
}
else
{
$(x).closest("div").find("a").eq(0).addClass("ddown_busy");
$(x).closest("div").find("div").each(function(){
$(this).find("a").each(function(){
$(this).addClass("ddownItem");
});
});
}
}
</script>
</head>
<body>
<div style="width:100%;height:25px;background:#aa0;border:2px solid #770;">
<div class="ddown">
<a class="ddownHead" href="#!" Onclick="toggle_expand_ddown(this);">Click to Expand</a>
<div>
Item 1
Item 1
Item 1
Item 1
</div>
</div>
This is Another Child in same Parent
</div>
</body>
</html>
I've Also Created Fiddle Here.
I think It is Because of CSS only. But However Any suggestions are welcome.Hope You'll Help me Soon.
I think you are having problem with opening and closing <div> tags
I tried to add a <div> tag to the another child and this **css**:
.div2{
display: inline-block;
position: absolute;
}
FIDDLE DEMO
or this without using position absolute by adding this css to your main div:
overflow: visible;
vertical-align: top;
FIDDLE DEMO 2
or by adding float:left to the .ddown css
FIDDLE DEMO 3
PS: I think option 1 is a better practice, you'll just have to put every child in a <div> tag
I am using the script at slidesjs.com (http://slidesjs.com/examples/simple/), trying to put it into my webpage. I decided to use a script and not just attempt to write it in jQuery myself as I could not get it to work, and I suspect the same problem is occurring here..whatever it may be. Here is the page source code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>John Smith</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#sections').slides({
preload: true,
generateNextPrev: true
container: 'sections_container'
});
});
Web Developer
John Smith
This text is purely to fill space until I add real content.
</p>
<p id="contact">If you'd like to contact me about anything, don't hesitate to email me at j.smith#example.com</p>
<div id="social_media"><img src="images/social_media/facebook.png" /><img src="images/social_media/twitter.png" /><img src="images/social_media/flickr.png" /><img src="images/social_media/youtube.png" /></div>
<div class="clear"></div>
</div>
<div>
<h3 class='heading'>Information</h3>
<p>
<ul>
<li><strong>Name:</strong> John Smith</li>
<li><strong>Location:</strong> Sydney, Australia</li>
</ul>
</p>
<br />
<h3 class='heading'>Achievements & Experience</h3>
<p>
<ul>
<li>Worked at Google</li>
<li>Worked at McDonalds</li>
</ul>
</p>
</div>
</div>
</div>
</body>
The CSS if anyone is interested.
* {
padding:0;
margin:0;
}
a {
color:white;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
body {
background: url('images/background.png');
font-size:12px;
font-family:arial;
color:#E5E5E5;
}
.sections_container {
width:768px;
display:none;
}
li {
margin-left:20px;
}
.sections_container div {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
display:block;
}
.pagination {
list-style:none;
margin:0;
padding:0;
}
/*
Optional:
Show the current slide in the pagination
*/
.pagination .current a {
color:red;
}
.top {
margin: 15px auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}
.section {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}
h1,h2,h3,h4,h5,h6 {
}
#subtitle {
color:#919191;
text-align:right;
}
#title {
text-align:right;
}
#profile {
float:left;
height:52px;
width:52px;
}
#youtube_video {
float:right;
padding-left:10px;
}
#contact {
margin-top:8px;
font-weight:bold;
font-style:italic;
}
#social_media {
margin-top:40px;
text-align:center;
}
.heading {
text-align:center;
}
.demphasis {
color:#9E9E9E;
}
.clear {
clear:both;
}
Thanks!
OK. I can see a couple of wee issues.
Firstly, in your CSS you reference .section_container, whereas in the HTML it's <div class="sections_container"> - note the 's' in the middle. Same for section/s.
Secondly, it looks like SlideJS defaults to "slides_container". Either rename your divs, or set the container name when you're initializing it:
$('#sections').slides({
preload: true,
generateNextPrev: true,
container: 'sections_container'
});
I've created a little jsFiddle at http://jsfiddle.net/jCFeQ/ - it still has some issues, but is closer to working than when we started. Change those two things and see how you go.
It appears you have a typo in your CSS that refers to a missing HTML element:
.section_container div {
...
}
Instead of .section_container, your CSS should be .sections_container (note the plural) which matches your HTML:
<div class="sections_container">
<div></div>
...
<div></div>
</div>
Additionally, the Slides jQuery Plugin expects an HTML element with a class of .slides_container as the parent of the slides.
Since you've deviated from the default markup, you'll need to supply the plugin's container option in your jQuery function:
<script>
$(function(){
$('.sections_container').slides({
preload: true,
generateNextPrev: true,
container: 'sections_container'
});
});
</script>
Silly question, but given you've copied the code letter-for-letter from that example: Is the file you reference in <script src="js/slides.min.jquery.js"></script> actually there - do you have a js folder with that file inside it?
Also version 1.5.1 of jQuery is quite out-of-date. It shouldn't make any difference, but you might as well change that to 1.7.1