How can I make list item with uniform length? - javascript

I am creating an unordered list for horizontal tab component. I want each list item filling in one of three boxes with uniform length and height shown on the image. Here is my jsFiddle and javascript. What should I change on CSS to make this happen?
$(function(){
$('#tabs').tabs({
event: "mouseover"
});
});
Here is the jsfiddle.

HTML & CSS: How to create four equal size tabs that fill 100% width?
I tried table display yesterday but did not work yesterday. Yet, it seems to work today so I post it in case someone shares the same problem with me

Nice solution.
One of advices and solutions is also to take look on bootstrap components, and just include the classes correctly:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-pills nav-justified">
<li role="" class="active">Home</li>
<li role="">Profile</li>
<li role="">Messages</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
I think this can also be helpful, you can save a lot of time with design :)

Related

Jquery ui menu issue

When you are leaving the parent item of a submenu in jquery menu,there is a slight delay closing the submenu.
any way to disable this and make it close instantly ?
*iknow its a EOL dead library but i'm asking just in case any of you guys remember something !
$(function() {
$("#menu").menu();
});
#menu{
width:150px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
</head>
<body>
<ul id="menu">
<li>
<div>W/O submenu</div>
</li>
<li>
<div>With submenu</div>
<ul><li><div>Submenu</div></li></ul>
</li>
</ul>
</body>
</html>
The menu widget does have a 300 millisecond delay.
So, if you download the non-minified version of the js file, from here:
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js (based on the OP's URL)
Then use that file locally. Then, in the file, change the delay at line 4946 (in the menu widget, noted on line 4943):
4943 var widgetsMenu = $.widget( "ui.menu", {
4944 version: "1.12.1",
4945 defaultElement: "<ul>",
4946 delay: 300, // THIS delay
4947 options: {
...to a lower value, say 100 (or lower), and then save, reload the page, and check the behavior.
Note that I would not remove the delay entirely, as there are references to that attribute/property, but set it to a lower value as to be virtually unnoticeable.

Pizza pie and doughnut with html

I have downloaded a project of pizza pie and doughnut graphs with html and etc from Zurb website.
For some reason when i open the HTML from my PC the graphs cant show up, only the title and basic information.
Is there anything missing? Do I need to download more stuff for support?
Here is the link for Zurb website where I have downloaded the project
https://zurb.com/playground/pizza-pie-charts
This Pie Graph Support it on Jquery 2.0
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="dist/js/vendor/dependencies.js"></script>
<script src="dist/js/pizza.js"></script>
<script>
$(window).load(function() {
Pizza.init();
$(document).foundation();
});
</script>
Replace This Line on the bottom of Code In side Body Tag
Look at their explanations.
You have to write the following in the head tag to make it works:
The first link is the CSS (cosmetics)
Then you have to download jquery (seems that library depend on jquery)
After that you have links for pizza.js
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/vendor/snap.svg.js"></script>
<script src="js/jquery.pizza.js"></script>
To test if it works, simply insert their code:
<ul data-pie-id="my-cool-chart">
<li data-value="36">Pepperoni</li>
<li data-value="14">Sausage</li>
<li data-value="8">Cheese</li>
<li data-value="11">Mushrooms</li>
<li data-value="7">Chicken</li>
<li data-value="24">Other</li>
</ul>
<script>Pizza.init();</script>
Replace it by the pie you ant to create

Flexslider Plugin Slides Are out of Order

My problem is about Flexslider plugin. I don't know why slides are out of order. Considering my markup:
<div class="flexslider">
<ul class="slides">
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
</ul>
</div>
I have this result:
First li appears as second slide, second li as third slide, and third li as first slide.
This problem appears when I add animation: "slide" option, like this:
$(window).ready(function() {
$('.flexslider').flexslider({animation: "slide"});
});
I'm confused, maybe somewhere in my code some CSS causes this behavior.
This problem is a bug in flexslider version 2.2.2 download package. Even the demo file in the downloaded package does not work fine, really!
After so much investigation I found out the "jquery.flexslider.js" has problem and got a working file from version 2.2.0.
The solution: Get a working package version 2.2.0. If you are interested make a comment to make a working package available to you for download.
It's hard to tell what is going wrong without all of the code, but this may be a solution for you.
$(window).ready(function() {
$('.flexslider').flexslider({animation: "slide", startAt: 0});
});
This is because you put the slides in an unordered list, when you should use ordered list like this:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({animation: "slide"});
});
</script>
</head>
<body>
<div class="flexslider">
<ul class="slides">
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
</ul>
</div>
</body>
</html>
EDIT: Try the updated code. Make sure that you load the flexslider.css before JS and you use $(window).load

How can I make document.write and ajax play nice?

My programming skills are rudimentary at best, so please forgive me if I sound a little clunky discussing these things. I'm learning, but at a chimp's pace.
Here's my issue: I'm using JQuery Mobile to bring in some form content as a dialog via ajax. This content is contained in the document itself, in second div with a data-role="page" attribute.
Within that second page div, I have some javascript that defines a few vars, then writes them into the doc with document.write().
However, when I click the link (the far right link in the nav), instead of popping up a nice dialog, Firefox instead briefly loads a new page with the fist var (not dynamically but as a static page), then redirects back to the starting page, leaving a "wyciwyg(00000)..." in my browser history. Upon said redirect, "WYCIWYG" is displayed in the browser's title bar. Other browsers choke in slightly different ways (Safari doesn't redirect, Chrome displays all the vars and doesn't redirect, etc.), but the WYCIWYG-in-the-history factor is in play in all three. If I remove the document.write commands, the link behaves as expected.
I've scoured the web for hours and not found an answer... similar problems show up in 10 year old Mozilla bug reports, but not much else. The only resolution I've found is not to use document.write() in content loaded via ajax. Unfortunately, I have no clue what the alternative would be, or how I would even begin to execute it. The Javascript code originated at Google - front-end code for a transit trip planner.
Below is some stripped-down code that illustrates the issue. Any guidance would be greatly appreciated, bearing in mind the whole chimp's-pace thing. Thanks in advance.
<!DOCTYPE HTML>
<html>
<head>
<title>WYCIWYG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile.structure-1.2.1.min.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<script type='text/javascript' src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";
</script>
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul data-mini="true">
<li>Service 1</li>
<li>Service 2</li>
<li>PLAN TRIP</li>
</ul>
</div>
</div>
<div data-role="page" id="planTrip">
Some document.write js:
<script>
document.write(startExample);
document.write(endExample);
document.write(zip);
</script>
</div>
</body>
You could simply use jQuery.html() on placeholder elements:
Source: http://jsfiddle.net/fiddlegrimbo/suD6s/6/
Demo: http://fiddle.jshell.net/fiddlegrimbo/suD6s/6/show/light/
<div data-role="page" id="planTrip">
Some document.write js:
<p id="start"></p>
<p id="end"></p>
<p id="zip"></p>
<script>
$("#planTrip #start").html(startExample);
$("#planTrip #end").html(endExample);
$("#planTrip #zip").html(zip);
</script>
</div>

How do I call an HTML page to a jQuery tab menu in the div section retaining all functionality?

I'm new to JavaScript and need some help figuring out how to put things together. I need to put my JavaScript image loop html page on my jQuery menu tab page. Here is my jQuery code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness /jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About me</li>
<li>Contact us</li>
<li>Gallery</li>
</ul>
<div id="home">
<p>A short paragraph about Overcoming Obstacles.</p>
</div>
<div id="about-me">
<p>A short paragraph about me.Banner advertisement that uses a JavaScript function to change the image every few seconds using three images.</p>
</div>
<div id="contact-us">
<p>My contact details.</p>
</div>
<div id="gallery">
<p>This is my gallery.</p>
</div>
</div>
</body>
</html>
The part I need help with is the about me page. I have the image loop created with the page description and it works. What I need to do is call the About_me.html (named Brunson_About_me_rotate2.html) to the jQuery menu tab page with all its functionality. But I only know how to work with HTML, CSS, JavaScript, jQuery, because that's all I understand how to do. It can't be done with Ajax, ASP, PHP, or SPRY because I don't know how to work with them and this is enough of a headache for me right now. And it has to work with the client side, not the server side. Also, this is going into a Dreamweaver page.
I have tried to put the loop code with text into the About us section of the Tab Menu code, but that doesn't work. Alternately, I have tried:
<? include("./Brunson_About_us_rotate2.html");?>
(Because that's what the file name is) trying to call up the loop in the jQuery menu page About us, but that doesn't work either; all I get is a blank page. I'm VERY new to this whole thing and I barely know how to make this happen; it's taken me 5 days to get this much put together. I don't even know what options are available to make it work. Can someone help me figure out what to do? I just need these 2 pages to work together properly when the page is clicked. Thank you for your time.
After getting several options, thank you both for your help by the way, that did not work, I have been working the code around to see what I can do with it. I am posting the code just as it is now and almost what it should look like after it's uploaded to the web. Here's what I have so far:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Brunson - Home</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness /jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
</ul>
<div id="home">
<p><h2>What is a Life Coach?</h2></p>
<p>A life coach is someone who is an advocate for you in reaching a higher level of understanding<br />
and being the best person you can be in whatever area of your life you decide you need improvement in.</p>
<p><h2>What does a Life Coach do?</h2></p>
<p>A Life Coach assists you in identifying those areas in your life that you would like to change.<br />
Once those areas are determined, the process of creating the life you truly can begin.</p>
</div>
<div id="about">
<script type="text/javascript">
var pictureArchive= ['image1.jpg','image2.jpg','image3.jpg'];
window.onload=function() {
var o=document.createElement('img');
o.setAttribute('id', 'image');
o.setAttribute('src', pictureArchive[0]);
o.setAttribute('alt', '');
document.body.appendChild(o);
rotate(pictureArchive.length);
}
function rotate(idx) {
if(idx>=pictureArchive.length) {
idx=0;
}
document.getElementById('image').src=pictureArchive[idx++];
timerID=setTimeout('rotate('+idx+')', 4000);
}
</script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<p>I became a Life Coach so I could reach more people and make changes in more lives than I was
able to do when I limited myself to my Alternative Therapies Business. By choosing to take the
limits I placed on myself off, I have created abundance in my life and create more value than I
was able to do before. The school I chose to get my Life Coach Certification from was QSCA because
they have the same beliefs that I do. Living the Universal Laws, living my life with integrity,
being the best that I can be, and ascending to higher levels of awareness and consciousness allows
me to help others overcome negative behaviors and limited thinking patterns. Helping others this
way allows me to create a reality that is past the negativeness we have been living with.</p>
</div>
<div id="contact">
<p>My contact details. Form asking for name, email address, and a message. The form will have an unselected radio button array that includes a yes or no response. All fields required. Validation of all fields is a must. Email address must be present and match</p>
<p>the criteria for a legitimate e-mail address (using regular expressions). The submit button must call a validation routine; and when the user has filled in all information correctly, the page will display a thank you message and clear the form. The ehank you message can be s separate page, or it can be displayed on the same page.</p>
<p>Are you ready to make a change in your life right now? Yes No</p>
</div>
<div id="gallery">
<p>Once you make a choice to make a change, old limiting beliefs seem to just fade away.</p>
<p>As nature abhors a vacuum, unlimited beliefs seem to jump to the fore.</p>
<p>Where once there was nothing but limits, suddenly everything is possible.</p>
</div>
</div>
</body>
</html>
What I got with the code ya'll gave me was a blank about page, a page with a box that's window scrolled up and down and side to side and had an error message in it that said IE could not open webpage, and the last code gave me that code on the browser page. So I started just trying to play with the code and see what I could get to work. I almost have what I need. And yes, I do realize that some of the code is not placed correctly, but when I placed it correctly, the images didn't show up at all on any of the pages.
The only problem with the way this is, is that the images are on all the pages; they are just supposed to be on the About page. I'm going to be putting a contact form on the Contact page and 3 different images that fade out, move, and fade in on the gallery page. Then ultimately, after I get done coding this in NotePad and checking it in the browsers to make sure it works, this "page" with all this content included, will go in Dreamweaver that will have the esthetics attached, external links, a clock and then get uploaded. So, does anyone have any ideas as to what I should try next?
Your problem is, that you made the php - tag not correct.
<?php include("../Brunson_About_us_rotate2.html"); ?>
And you also must put two points to get to the parent directory.
Ajax seems a very easy solution for this.
jQuery already has it's own easy to use ajax functions.
One of them being .load() http://api.jquery.com/load/
$('#about-me').load('../Brunson_About_us_rotate2.html');
Another option would be iframe
<div id="about-me">
<iframe src="../Brunson_About_us_rotate2.html"></iframe>
</div>
http://www.w3schools.com/tags/tag_iframe.asp

Categories