Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
i want to faq page like this http://videoguard.pt/en/support/#section2
i am doing this
THIS IS MY HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>FAQ ACRONYM</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<div id="main">
<div id="section1">
<ul class="sec1-style">
<li>I completed the payment process online but did not receive an order confirmation. Did you receive my order?</li>
<li>I still have not received my items, when will I get them?</li>
<li>How do I change my address?</li>
<li>How do I cancel/change my order?</li>
</ul>
</div>
<div id="section2">
<ul>
<li id="f1"><p>If you have received an on-page confirmation, this means your order did go through. Do check your spam box to see if your order confirmation was filtered there by your email server.</p></li>
<li id="f2">On average, local deliveries should reach within 1-3 working days. If has been more than 3 working days, do send us an email with the delivery address and invoice number so we can do a status check for you.</li>
<li id="f3">Log in with your Handymon account and update the changes under my personal details. However if you have just purchased under your old address and would like to re-direct the package, please drop us an email at askme#handymon.com as soon as possible. We will try to cancel/modify your order before it is mailed out.</li>
<li id="f4">Please drop us an email at askme#handymon.com as soon as possible. We will try to cancel/modify your order before it is mailed out.</li>
</ul>
</div>
</div>
</body>
</html>
THIS IS MY CSS
#main
{
width:100%;
height:600px;
margin:auto;
}
#section1
{
width:50%;
height:600px;
float:left;
border:2px solid red;
border-radius:5px;
}
#section2
{
width:49%;
height:600px;
float:right;
border:2px solid grey;
border-radius:5px;
}
HELP ME i am stuck i want to do like this http://videoguard.pt/en/support/#section2 guide me how to do this
For slide effect use jquery UI
DEMO
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var link= $(this).attr("href");
$("#section2 ul li").hide();
$(link).show("blind");
});
});
Try it...
<script>
$(document).ready(function(){
$('#section2 ul li').hide();
$('#section2 ul li:first').show();
$("a").click(function(){
var target = $(this).attr('href');
$('#section2 ul li').hide();
$(target).toggle();
});
});
</script>
You have a minor script problem. try this:
$(document).ready(function(){
$("#section2 li:not(:first)").hide();
$("a").click(function(){
$("#section2 li").hide();
$($(this).attr("href")).toggle();
return false;
});
});
Related
So I typed up most of the pertinent information into the code itself
I would love a explanation of whats happening and why, especially between the multiple outcomes of .text .html and not returning what i want
<DOCTYPE! Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
p{color: white;
background: black;}
</style>
<script>
$('document').ready(function() {
$(document).on('click', '.nav', function() {
document.getElementById('text').innerHTML=$(this).html;
});
});
</script>
</head>
<body>
This is a test html to trouble shoot the functionality of the script, the above script runs and does what it needs to in other aspects but when trying to add in the ability to edit a divs text based on the nav clicked on theres a error.
when using ".text" in the script i get <p> function (a){return V(this,function(a){return void 0===a?m.text(this):this.empty().append((this[0]&&this[0].ownerDocument||y).createTextNode(a))},null,a,arguments.length)} </p> in my div,when i use ".html" in my script i get <p> function (a){return V(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(fb,""):void 0;if(!("string"!=typeof a||mb.test(a)||!k.htmlSerialize&&gb.test(a)||!k.leadingWhitespace&&hb.test(a)||rb[(jb.exec(a)||["",""])[1].toLowerCase()])){a=a.replace(ib,"<$1>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(m.cleanData(ub(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)} </p>
<ul id="nav">
<li class="nav"> This is the text that should be placed in the div </li>
</ul>
<div id="text"> this text should be changed </div>
</body>
</html>
The jQuery method .html() is a function you need to call it / use (). Or go vanilla and just do this.innerHTML.
That means:
$(document).on('click', '.nav', function() {
document.getElementById('text').innerHTML = this.innerHTML;
});
Example in the snippet:
$('document').ready(function() {
$(document).on('click', '.nav', function() {
document.getElementById('text').innerHTML=this.innerHTML;
});
});
p{color: white;
background: black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is a test html to trouble shoot the functionality of the script, the above script runs and does what it needs to in other aspects but when trying to add in the ability to edit a divs text based on the nav clicked on theres a error.
when using ".text" in the script i get <p> function (a){return V(this,function(a){return void 0===a?m.text(this):this.empty().append((this[0]&&this[0].ownerDocument||y).createTextNode(a))},null,a,arguments.length)} </p> in my div,when i use ".html" in my script i get <p> function (a){return V(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(fb,""):void 0;if(!("string"!=typeof a||mb.test(a)||!k.htmlSerialize&&gb.test(a)||!k.leadingWhitespace&&hb.test(a)||rb[(jb.exec(a)||["",""])[1].toLowerCase()])){a=a.replace(ib,"<$1>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(m.cleanData(ub(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)} </p>
<ul id="nav">
<li class="nav"> This is the text that should be placed in the div </li>
</ul>
<div id="text"> this text should be changed </div>
Something like this:
$(document).ready(function () {
$(".nav").on('click', function() {
$("#text").html( $(this).html() ); // Getting too nested here
}
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a very simple website with some menu tabs (i.e. Home, About Me etc.) and few paragraphs. I added click function inside my .JS file so that the clicking on tab can navigate to the desired paragraph (or page). But it's not working.
I should refernce to this post as I posted back.
[NOTE: I have apache running in my computer and xwamp is installed. I have jquery source added into my file and they are accurately saved in correct path or file. Besides I have Bootstrap installed, though I didn't necessarily need to set path for any file to it.]
My code:
main.php:
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main_interaction.js"></script>
<div class="row">
<div id="header" class="col-xs-12">
<h1>Welcome to my green world!</h1>
</div>
<div class="col-xs-4">
<ul>
<li id="home">HOME</li>
<li id="gallery">GALLERY</li>
<li id="about">ABOUT ME</li>
<li id="contact">CONTACT ME</li>
<li id="diary">MY DIARY</li>
<li id="blog">BLOG</li>
</ul>
</div>
<div class="col-xs-8 home">
<p>Thank you for spending your time to visit my website. My name is Jabir Al Fatah. I live in Sweden. I have a lot of interest in web developing and 3d graphics designing. I am a travel addicted guy. I love to travel and have experience about diversity among life and nature. I am passionate. I don't do everything just becuase I am obliged to do,rather I like to take risk to be done with something just because I like.I haven't have a wonderful childhood in my life. But I admit it that my parents were surprisingly aware of my future and even every singlestep in my life. Their love and affection fulfilled all of my demand.Well, I just admired them a little. There are tons of others stuff I can say. However, in my life, changes happen very fast.</p>
</div>
<div class="col-xs-8 gallery hidden">
<p>This is the gallery.</p>
</div>
<div class="col-xs-8 about hidden">
<p>This paragraph should appear while clicking on "About me". Beisides, it's not accurately placed in the window. I need to fix that .Another problem is that this paragraph moves under the menu area by pushing it up when I make the window size smaller.</p>
</div>
<div class="col-xs-8 contact hidden">
<p>Contact me here.</p>
</div>
<div class="col-xs-8 diary hidden">
<p>My diary will be here.</p>
</div>
<div class="col-xs-8 blog hidden">
<p>Blog posts appear here.</p>
</div>
<div id="footer" class="col-xs-12">Developed by Jabir Al Fatah</div>
</div>
</body>
</html>
.JS:
$("li").on('click', function () {
$(".col-xs-8").addClass("hidden");
$("." + $(this).attr("id")).removeClass("hidden");
});
.CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.row {
margin: 0;
}
#header {
background-color: mediumturquoise;
text-align: center;
padding: 20px;
border: 4px solid crimson;
}
.col-xs-8 {
text-align: center;
font-family:'Verdana';
color: mediumblue;
font-size: 13pt;
}
.col-xs-4{
border: 4px solid crimson;
background-color: yellow;
line-height: 40pt;
font-family:'Tahoma';
font-size: 15pt;
font-weight: bold;
margin: 0;
padding: 0;
}
.col-xs-4 ul {
list-style-type: none;
}
#footer {
background-color: gray;
border: 2px solid green;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
li:hover {
cursor: pointer;
text-decoration: underline;
}
You're including (and thus executing) the JavaScript before the elements exist on the page. HTML/JavaScript is processed in the order in which is exists in the DOM. So when this runs:
$("li")
the parser is only at the top of the HTML body and hasn't loaded any li elements into the DOM yet. Thus, that selector doesn't find anything.
Either put the JavaScript at the end of the DOM or wrap it in a document ready handler:
$(function () {
$("li").on('click', function () {
// etc.
});
});
(or both)
on not support from jquery 1.9, try live
$("li").live("click",function(){});
I looked at your code and was wondering if replacing
$("li").on('click', function () {
with
$("li").click(function() {
would solve the issue. I've used jquery for a while but have never used ".on" but my onclicks work fine. Hope this helps!
I have been searching the Internet for days with no luck. I need a modal window to upload a file and pass additional values to the script. The modal window needs to open when the user clicks on "This is Question #". Below is my current script. Any help or direction would be greatly appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
/*background-image: url(/images/page.png);*/
background-position: 0 1px;
background-repeat: no-repeat;
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display:none;
}
</style>
<script src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function addLine(what) {
$("#" + what).append('<li>URL to uploaded document</li>');
};
function myToggle(what){
$("#" + what).toggleClass('hidden');
};
</script>
</head>
<body>
<ul>
<li class="folder">
Test
<ul class="hidden" id="Test1">
<li class="folder">
Test1-2
<ul class="hidden" id="Test1-2">
<li>
This is Question 1
<ul id="Question1"></ul>
</li>
<li>
This is Question 2
<ul id="Question2"></ul>
</li>
<li>
This is Question 1
<ul id="Question3"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Try using Ravishanker Kusuma's jQuery File Upload Plugin, here:
http://hayageek.com/docs/jquery-upload-file.php
To make the dialog modal, you just need to create a div like this:
<div id="myOverlay"></div>
and style it like this:
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;overflow:hidden;background:black;opacity:0.5;z-index:10;}
The overlay DIV is initially hidden (by appending display:none; to the end of the css above). When you want it visible, you remove the display:none;. When visible, it will overlay all the rest of the page, with the exception of your upload form which must have a higher z-index value.
Making a dialog modal really is that simple.
So, using Ravi's code, you just show a DIV like this:
See This jsFiddle Demo
HTML:
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
<div id="myOverlay"></div>
<div id="box">
<div id="box-inside-div">
<div id="fileuploader"></div>
</div><!-- #box-inside-div -->
</div><!-- #box -->
<div id="main">
<h1>Upload a File Page</h1>
<p>To upload a file, click the button below</p>
<input type="button" id="myButt" value="Upload" />
</div>
CSS:
/* #myOverlay on two lines for readability in this SO answer */
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;}
#myOverlay {background:black;opacity:0.5;z-index:10;display:none;}
#box {position:absolute;top:150px;left:125px;height:200px;width:550px;background:white;z-index:15;display:none;}
#box-inside-div{margin-left:20px;margin-top:30px;}
jQuery/javascript:
$(document).ready(function() {
$('#myButt').click(function () {
$('#myOverlay').show();
$("#box").show();
$("#fileuploader").uploadFile({
url: "upload_recv.php",
fileName: "myfile",
onError: function(files,status,errMsg){
/* onError because (1) jsFiddle cannot do ajax */
/* AND (2) there is no upload_recv.php file! */
$('#myOverlay').hide();
$('#box').hide();
alert('The file is now on the server');
}
});
});//END mybutt.click
});
When the upload is completed you would hide both the #myOverlay DIV and the #box DIV (which contains the fileuploader DIV). In the jsFiddle example, to determine when the upload has finished, I used the onError event (because jsFiddle cannot do either ajax or the back end PHP processing). You would probably use the onSuccess or afterUploadAll events.
For more information on how to do that, see the demos on the HayAGeek page.
And finally . . . how to process the file on the server once uploaded?
This is done by the PHP processor file you specified in the jQuery code above. In the above example, we named it upload_recv.php
On the HeyaGeek demo page, see Server Side at the top right.
Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>
If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>
#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This
Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.
I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/
I have a web page that has JQuery tabs with iFrames loaded in the 2nd through 4th tab. My problem is in a button I've added to the first tab. I want that button, when pressed, to change to the next tab.
EDIT 1: Here is a fiddler that shows my problem. http://jsfiddle.net/lochalan/AXa9J/
Webpage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Student Application</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="/user/tabs.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html {
font-size:10px;
}
.iframetab {
width:100%;
height:auto;
border:0px;
margin:0px;
position:relative;
top:-13px;
}
.ui-tabs-panel {
padding:5px !important;
}
.openout {
float:right;
position:relative;
top:-28px;
left:-5px;
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td>
<img src="img/logo960x100moodle.png" width="960" height="92" alt=""><br>
</td></tr>
</table>
<div id="tabs">
<ul>
<li>Instructions</li>
<li><a class="tabref" href="#tabs-2" rel="/user/application-tab.php">Student Information</a></li>
<li><a class="tabref" href="#tabs-3" rel="/user/emergency-tab.php">Emergency Contact</a></li>
<li><a class="tabref" href="#tabs-4" rel="/user/healthform-tab.php">Health Form</a></li>
</ul>
<div id="tabs-1" class="tabMain">
<h2>Welcome to QSI Shekou!</h2>
<p>This application is designed to give the school all the information needed to make an informed decision as to whether QSI is the best school for your child. We believe all children can be successful and we are proud that you have choosen QSI Shekou as that place. In the next few minutes, you will be presented with 3 seperate application forms. The first application gathers the needed biographical information about your child. The second form provides the school with emergency contact information and instructions in the event the school needs to contact someone on your child's behalf. The third form is our health form. This provides the school with information about your child's health in order to help us make QSI Shekou a fun and safe place to learn and grow.</p>
<p><strong>Remember to give the following documents to the admissions department:</strong></p>
<ul>
<li>Immunization records (copy)</li>
<li>Health / Emergency Form (Found on our Website)</li>
<li>Previous School Records (copy)</li>
<li>Student's Passport (copy)</li>
<li>Student's Visa (copy)</li>
<li>Mother's Passport (copy)</li>
<li>Mother's Visa (copy)</li>
<li>Father's Passport (copy)</li>
<li>Father's Visa (copy)</li>
<li>3 Student Passport Photos</li>
</ul>
<button class="nexttab" href="#"><strong>Let's get started!</strong></button>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
</div>
</body>
</html>
Javascript / JQueryUI:
$(document).ready(function() {
var $tabs = $('#tabs').tabs();
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
//get selected tab
function getSelectedTabIndex() {
return $tabs.tabs('option', 'selected');
}
//get tab contents
beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");
loadTabFrame($(beginTab).attr("href"),$(beginTab).attr("rel"));
$("a.tabref").click(function() {
loadTabFrame($(this).attr("href"),$(this).attr("rel"));
});
//tab switching function
function loadTabFrame(tab, url) {
if ($(tab).find("iframe").length == 0) {
var html = [];
html.push('<div class="tabIframeWrapper">');
html.push('<div class="openout"><img src="data/world.png" border="0" alt="Open" title="Remove iFrame" /></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>');
html.push('</div>');
$(tab).append(html.join(""));
$(tab).find("iframe").height($(window).height()-80);
}
return false;
}
});
Why won't my button change the tab?
Use active option to select current or change tab
var selected = $("#tabs").tabs("option", "active");
$("#tabs").tabs("option", "active", selected + 1);
There's a few things wrong here, more than I'm willing to cover on a forum unfortunately.
If you're going to use jQueryUI then I suggest you go use ThemeRoller. Do a UI theme and use the CSS it generates for you. The classes are named very intuitively and it will help you identify what your functions are working on. Use Firefox with Firebug plugin so you can debug. You're on the right track but you're still cloudy on some core concepts.
jQuery Tabs API
jQueryUI ThemeRoller