I am trying to align the header Orders Management:
and the normal text Logged in as: Admin , Logout in the same line.
It works when it is the only one.
link
but when I integrate it . It is not align as you can see here
<div id="dialog-form" title="Order Details">
<p class="validateTips">Spicy Sandwitch</p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips">Sandwitch only lettuce</p>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<div class="header">
<img src="img/logo.png" alt="logo" />
<h1>Cafe name</h1>
</div>
<p style="clear: both;"></p>
<!--<h1>Orders Management:</h1>-->
<div style="border-bottom:1px ;">
<div class="left"><h1>Orders Management:</h1></div>
<div class="right"><span class="blackText">Logged in as: </span> <span class="blueText">Admin</span> <span class="blackText">,</span> <span class="redText">Logout</span>
</div>
</div>
<!-- -->
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Surname</th>
<th>Address</th>
<th>Telephone</th>
<th>Time/Date</th>
<th>Order Details</th>
<th>Delivered</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Lykavitou 12, 2109 Aglantzia</td>
<td>99123456</td>
<td>21:00 21/11/16</td>
<td>
<button id="create-user-1" class="showDialog">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
<tr>
<td>Andreas Georgiou</td>
<td>Grigori Auxentiou 12, 2109 Aglantzia</td>
<td>99654789</td>
<td>20:00 21/11/16</td>
<td>
<button id="create-user-2" class="showDialog">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
</tbody>
</table>
</div>
And I am trying to make the logout text to be a hyperlink that will redirect to an html page in the same folder . The did not worked.
In order to make the Logout and Admin <div>s elements appear on one line they need to be contained by containers that do not fill out the width of a line by default (block elements like <div>, <p> tags).
Replace the div elements for Admin and Logout with inline elements (e.g. <span> will allow you you create content that appears on a line/row together.
A block element like a <div> will by default both start on a newline and fill the width of that line.
It will do this unless it has its display property set to inline-block rather than the default block but you also have to provide a width to the `div in this case.
Since you have set the display to inline-block all you have to do is provide the same <div>`s with a width property.
Try increasing the width of div#users-contain. With the width of only 300px, there is only so much space there
HTML I've as of now for this one.
<div id="box" class="box " >
<table style = "border=0; cellpadding=0 cellspacing=4">
<tr style=" border=0;">
<td style="border=0;"><a type="button" class="boxclose" id="boxclose" onclick="cancelPopup();"></a>
</td>
</tr>
<tr style="border=0;">
<td style="border=0;">
<textarea id="text_area" placeholder="Input here..." name="comment" style="height:90px;width:325px; background: #fcfbf7"></textarea>
</td>
</tr>
<tr style="border=0;">
<td style="border=0;" >
Categories:
<select name="commentStatus">
<option value="annotation1">Annotation1</option>
<option value="annotation2">annotation2</option>
</select>
<br><br>
Amended: <input type="checkbox" id="myCheck">
</td>
</tr>
<tr style="border=0;">
<td style="border=0;">
<div class="mceActionPanel" style="">
<div style="float: right">
<input type="submit" style="background:#E6E6E6" id="insert" name="Save" value="Save"/>
</div>
</div>
</td>
</tr>
</table>
I want to include color choosing option and also a shape for the highlighted area. I tried as shown in above picture what I did right now, which is not the exact case I'm looking for.
below is the similar case I'm looking for and want to include the color options and shape options for user.
.
Can anyone help me with HTML and CSS how I can initiate those two boxes as a drop down with colors and shapes.
it would be great if someone can also give JS to highlight them back in html document on choosing the color and shapes.
Thanks,
--Sree
html5 introduced a color selector.
It may not be exactly what your looking for but it should be close to it.
<input type="color" placholder="test"/>
As for the shape selection
I think adding a unicode or image to each option would be the simplest approach:
.shapes {
font-size: 16px;
border-radius: 5px;
}
.shapes option {
height: 20px;
direction: rtl;
}
.shapes option span
<select class="shapes">
<option>Shape1 ✵</option>
<option>Shape2 ✩ </option>
<option>Shape2 ➜</option>
<option>Shape2 ◺</option>
</select>
I want to do two radio buttons. Their names will be car and home. If I click car, an input box about the car section will be shown and if I click home, an input box about the home will be shown.
I have found an example about this and I have a problem about it. The codes are below.
<body>
<script type="text/javascript">
function toggleMe(obj, a)
{
var e=document.getElementById(a);
if(!e)return true;
e.style.display="block"
return true;
}
function toggleMe2(obj, a)
{
var e=document.getElementById(a);
if(!e)return true;
e.style.display="none"
return true;
}
</script>
<form name="theForm">
Type<br>
<input type="radio" name="married" value="yes" onclick="return toggleMe(this, 'Car')"> Car
<input type="radio" name="married" value="yes" onclick="return toggleMe(this, 'Home')"> Home<br>
<div id="Car" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>Car InputBox</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr>
</table>
</div>
<div id="Home" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>Home InputBox:</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr>
</table>
</div>
</form>
</body>
Output of these codes
If I click the car first, the input box of the car section is shown. If I click the home first, the input box of the home section is shown. After I click the car or home first (doesn't matter) if I click another one, both input boxes are shown.
How can I solve this problem? When I click home, the home input box should be shown and when I click car, the car input box should be shown as well. Not both of them.
HTML
<div>
<input type="radio" name="option" value="car" onclick="toggleInput(this)" /> Car
<input type="radio" name="option" value="home" onclick="toggleInput(this)" /> Home
</div>
<div id="car-input-group" class="hide">
Car InputBox
<input name="name" type="text" />
</div>
<div id="home-input-group" class="hide">
Home InputBox
<input name="name" type="text" />
</div>
Javascript
function toggleInput(obj){
var a =document.getElementsByClassName("hide");
for(var i=0; i<a.length; i++){
a[i].style.display = "none";
}
document.getElementById(obj.value + "-input-group").style.display = "block"
}
css
.hide{
display: none
}
Working example: http://plnkr.co/edit/wPdTldCXG0LTJWEtzIxE?p=preview
What about this? Using jquery it's easier. I made it universal, so you could add more radio buttons (using myradio and myinput css classes) without touching the JS.
$( "input.myradio" ).click(function() {
$( "div.myinput").hide();
$( "div#"+$(this).attr('id')).toggle( "slow", function() {
// Animation complete.
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="theForm">
Type<br>
<input id="Car" type="radio" name="married" class="myradio" value="yes" />Car
<input id="Home" type="radio" name="married" class="myradio" value="yes" />Home<br>
<div id="Car" class="myinput" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>Car InputBox</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr>
</table>
</div>
<div id="Home" class="myinput" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>Home InputBox:</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr>
</table>
</div>
</form>
JSFiddle
I have quite strange problem, I have simple quiz engine which should restart it self if user doesn't pass with 70% and more.
Everything works ok but when i re-init the script, in next iteration it seems like it sees all questin divs more times. (as many times as many times you failed) so it makes me a mess since every other calculation is based on that.
here is everything to see: http://jsfiddle.net/xdgrh/DhTQw/2/
You can replicate the issue if you choose B for the first question and anything else for other questions. Than it will tell you to click restart because you failed.
In next iteration again choose B and look in feedback. (i checked in log too, it reads everything like there is each question doubled.) And so on as many iterations you make, that many times it calculates everything
html here: (because it must be in post by stack rules)
(Focus should be in $('.btnNext').click... and in $(".box:visible input:radio").each(function(index, value)... there it counts things two-three.. more times.. depending on how may times you fail)
<div id="lliquizContent">
<div id="headerX">
<h1>Task 1: Work with Today's Client (Final task) </h1>
</div>
<div class="feedback">
<div class="feedback-title">
FEEDBACK TITLE
</div>
<div class="feedback-text">
FEEDBACK TEXT
</div>
<img src="/Resource/GetResource/CRSTechModule1/feedback.m1s29.1.png" border="0" />
<div style="clear:both;"> </div>
<div class="feedback-footer">
<div class="btnFeedbackNext">Next Question ></div>
<div class="score"><strong>Score: </strong><span class="score"></span> %</div>
</div>
</div>
<div class="box" type="1">
<div class="headerX">
<p>Task question 1 of 4</p>
</div>
<div class="question qsize1">
<div class="questionText">Based on Anne’s original email, how should you respond?</div>
<div class="answers">
<table>
<tr>
<td><input type="radio" name="" value="0" /> </td>
<td><label>Email Anne to set up a face-to-face meeting.</label></td>
<td>
<feedback>
<fbtitle>Incorrect. You did not select the best approach for responding to Dr. Anne Jones. Click Next to view the next question.</fbtitle>
<fbtext>"I’d like to be able to meet with you, but as I said in my original email, I am just too busy! Please email me your thoughts about homes that might be suitable for my situation."</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="1" /> </td>
<td><label>Email Anne and ask her to register on your website.</label></td>
<td>
<feedback>
<fbtitle>Correct! You selected the best approach for responding to Dr. Anne Jones. Click Next to view the next question.</fbtitle>
<fbtext>"Thanks for getting back to me. I’ll look at the two homes you mentioned and try to register on your website when I get a chance. I am very excited about getting a new home in Springfield. Thanks for helping me."</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="0" /> </td>
<td><label>Email Anne to qualify her as a possible lead.</label></td>
<td>
<feedback>
<fbtitle>Incorrect. You did not select the best approach for responding to Dr. Anne Jones. Click Next to view the next question.</fbtitle>
<fbtext>"I really don’t have any more information to give you at this time. As I wrote in my original email, I think new construction would be ideal for me. Can’t you just email me information on homes that are available? I don’t have a lot of time."</fbtext>
</feedback>
</td>
</tr>
</table>
</div>
</div>
<div style="clear: both;"> </div>
<div class="attachments">
<a id="transcript-button1" href="#" lliQuizTitle="Transcript 1 lliQuizTitle">Approach #1</a> |
<div style="display: none;" id="TRANSCRIPT-TEXT1" lliQuizTitle="Transcript 1 lliQuizTitle">transcript 1</div>
<a id="transcript-button2" href="#">Approach #2</a> |
<div style="display: none;" id="TRANSCRIPT-TEXT2" lliQuizTitle="Transcript 2 lliQuizTitle">transcript 2</div>
<a id="transcript-button3" href="#">Approach #3</a>
<div style="display: none;" id="TRANSCRIPT-TEXT3" lliQuizTitle="Transcript 3 lliQuizTitle">transcript 3</div>
</div>
<div class="btnContainer"><a class="btnNext">SUBMIT</a></div>
<div class="instructions">Select the correct answer then click the forward arrow to continue.</div>
<div class="rightAttachmentBox">
<a id="transcript-button4" href="#">Click here</a><br />
to see the email from<br />
Anne Jones
<div style="display: none;" id="TRANSCRIPT-TEXT4" lliQuizTitle="Transcript 4 lliQuizTitle" lliQuizTop="20" lliQuizLeft="200" lliQuizWidth="300" lliQuizHeight="300">
transcript 4 transcript 4 transcript 4
</div>
</div>
</div>
<div class="box" type="2">
<div class="headerX">
<p>Task question 2 of 4</p>
<div class="questionText">Based on Anne’s original email, how should you respond?</div>
</div>
<div class="questions qsize2">
<table>
<tr>
<td>
<div class="question"> <div class="questionText">Based on Anne’s original email, how should you respond?</div> <div id="answers"> <table> <tr> <td><input type="radio" name="" value="1" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 1.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 2.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 3.</td> </tr> </table> </div> </div>
</td>
<td>
<div class="question"> <div class="questionText">Based on Anne’s original email, how should you respond?</div> <div id="answers"> <table> <tr> <td><input type="radio" name="" value="1" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 1.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 2.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 3.</td> </tr> </table> </div> </div>
</td>
</tr>
<tr>
<td>
<div class="question"> <div class="questionText">Based on Anne’s original email, how should you respond?</div> <div id="answers"> <table> <tr> <td><input type="radio" name="" value="1" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 1.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 2.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 3.</td> </tr> </table> </div> </div>
</td>
<td>
<div class="question"> <div class="questionText">Based on Anne’s original email, how should you respond?</div> <div id="answers"> <table> <tr> <td><input type="radio" name="" value="1" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 1.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 2.</td> </tr> <tr> <td><input type="radio" name="" value="0" /> </td> <td><label>Email Anne to set up a face-to-face meeting.</label></td> <td id="fedback_content">Question response 3.</td> </tr> </table> </div> </div>
</td>
</tr>
</table>
</div>
<feedback>
<correct>
<fbtitle>Correct...</fbtitle>
<fbtext>"Text..."</fbtext>
</correct>
<incorrect>
<fbtitle>Incorrect...</fbtitle>
<fbtext>"Text...."</fbtext>
</incorrect>
</feedback>
<div style="clear: both;"> </div>
<div class="btnContainer"><a class="btnNext">SUBMIT</a></div>
<div class="instructions">Select the correct answer then click the forward arrow to continue.</div>
</div>
<div class="box qsize3" type="3">
<div class="headerX">
<p>Task question 3 of 4</p>
<p>Select the best Target group for you based on your data. Next, select your Rationale and click Submit to get your feedback. You may view your client analysis at any time to help you choose an approach.</p>
<div class="questionText">I’ve reviewed your client analysis and I have an idea of where you might be able to add a lot of value to your clients. But I want to know what you think.<br />
What target group do you think it makes the most sense for you to select? Why?</div>
</div>
<div class="questions qsize3">
<table>
<tr valign="top" >
<td>
<div class="question">
<div class="questionText">Target group</div>
<div id="answers">
<table>
<tr>
<td><input type="radio" name="" value="0" /></td>
<td><label> Doctors and nurses transferring to Springfield.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>I think you should focus on transfers into Springfield, however, I think that group may be a little too specific.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="0" /></td>
<td><label>Home sellers with older homes looking to purchase new construction.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>I thought you didn’t like to work with this group.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td>
<input type="radio" name="" value="0" />
</td>
<td><label>Home buyers looking for older homes outside of Springfield.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>I am not sure why you picked this group. I thought you liked new construction.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td>
<input type="radio" name="" value="1" />
</td>
<td><label>First-time home buyers and transfers to the area looking for new construction.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext></fbtext>
</feedback>
</td>
</tr>
</table>
</div>
</div>
</td>
<td>
<div class="question">
<div class="questionText">Rationale</div>
<div id="answers">
<table>
<tr>
<td><input type="radio" name="" value="1" /></td>
<td><label>I only want to focus on one specific group that is associated with the hospital.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>For the rest of this meeting, I think we should focus on first-time home buyers and transfers to the area looking for new construction.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="0" /></td>
<td><label>I don’t want to pick between two of the buyer types with whom I enjoy working.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>For the rest of this meeting, I think we should focus on first-time home buyers and transfers to the area looking for new construction.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="0" /></td>
<td><label>Older homes have a lot more character than new construction.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>For the rest of this meeting, I think we should focus on first-time home buyers and transfers to the area looking for new construction.</fbtext>
</feedback>
</td>
</tr>
<tr>
<td><input type="radio" name="" value="0" /></td>
<td><label>Springfield is not expanding and there aren't new construction homes.</label></td>
<td>
<feedback>
<fbtitle></fbtitle>
<fbtext>I agree that you should focus on first-time home buyers and transfers looking for new construction. But why did you select them?</fbtext>
</feedback>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
<feedback>
<correct>
<fbtitle>Correct! You selected an appropriate target market and the best rationale. Click Next to view the next question.</fbtitle>
<fbtext>"I agree! I think you will be very happy working with this group and it sounds like you are well on your way to becoming a new construction expert. This expertise will add value to the service you provide your clients."</fbtext>
</correct>
<incorrect>
<fbtitle>You have a red X next to each incorrect answer. You did not select the best choices here. Click Next to view the next question.</fbtitle>
<fbtext></fbtext>
</incorrect>
</feedback>
<div style="clear: both;"> </div>
<div class="btnContainer"><a class="btnNext">SUBMIT</a></div>
<div class="instructions">Select the correct answer then click the forward arrow to continue.</div>
</div>
<div class="box-fail">
Ponovo init... TRY AGAIN...MUST GET 70%+
</div>
<div class="box-success">
It's on, go on...</div>
</div>
And here is s:
var lliQuiz = {
message1: "message1",
message2: "",
feedbackImage: "/image/not/set",
score: 0,
currentTab: 0,
checkFormat: function() {
var $boxes = $('.box'), valid = $boxes.length > 0;
if (valid) {$boxes.each(function (idx, box) {
var $box = $(this),$qtns = $box.find('.question');
if ($qtns.length == 0) {
valid = false; return false;
} valid = $qtns.filter(function () {
return $(this).find('input[type="radio"]').length < 2;
}).length == 0; if (!valid) { return; }
})
}
if (valid) {return true;} else {return false;exit;}
},
createFeedback: function(boxVisible,type,farray,addScore) {
$('.feedback img').attr('src',lliQuiz.feedbackImage);
if (type == 1) {
$.each(farray, function(i,id){ // NE TREBA FOR EACH??? samo je jedno pitanje...
$('.feedback .feedback-title').text($('input[id='+id+']').nextInDOM('fbtitle').html());
$('.feedback .feedback-text').text($('input[id='+id+']').nextInDOM('fbtext').html());
});
}
if (type == 2) {
if (addScore == true) {
$('.feedback .feedback-title').text($(boxVisible).find('feedback > correct > fbtitle').html());
$('.feedback .feedback-text').text($(boxVisible).find('feedback > correct > fbtext').html());
} else {
$('.feedback .feedback-title').text($(boxVisible).find('feedback > incorrect > fbtitle').html());
$('.feedback .feedback-text').text($(boxVisible).find('feedback > incorrect > fbtext').html());
}
}
if (type == 3) {
if (addScore == true) {
$('.feedback .feedback-title').text($(boxVisible).find('feedback > correct > fbtitle').html());
$('.feedback .feedback-text').text($(boxVisible).find('feedback > correct > fbtext').html());
} else {
var text = "";
$.each(farray, function(i,id){
var br = (i == 0) ? "<br /><br />" : "";
text = text + " " + $('input[id='+id+']').nextInDOM('fbtext').html() + br;
});
$('.feedback .feedback-title').text($(boxVisible).find('feedback > incorrect > fbtitle').html());
$('.feedback .feedback-text').html('"'+text+'"');
}
}
return true;
},
checkAnswers: function() { return 5; },
init: function() {
$('.box, .box-success, .box-fail').fadeOut(100);
$('span.redx').remove();
lliQuiz.score = 0;
lliQuiz.currentTab = 0;
console.log('init poeni: '+lliQuiz.score);
// check format
if (lliQuiz.checkFormat()) {
$('.box:first').fadeIn(1000);
console.log( "LLI - HTML FORMAT OK!!!" );
} else {
$('#lliquizContent').html('<div style="color: red; font-size: 16px; font-weight: bold; text-align: center; width: 100%;">HTML FORMAT ERROR</div>');
console.log( "LLI - HTML FORMAT ERROR!!!" );
}
console.log( "LLI - Quiz Start!" );
var pointsPerQuestion = parseFloat(100 / $('.box').length).toFixed(2);
$(".question").each(function(index,value) {
var groupNumber = ++index;
$(":radio", this).attr("name", "group" + groupNumber).each(function(index,value){
$(this).removeAttr('checked').attr("id","id"+groupNumber+index).nextInDOM('label').attr("for","id"+groupNumber+index);
});
});
$('input').iCheck('uncheck');
$('input').iCheck({ checkboxClass: 'icheckbox_minimal-blue', radioClass: 'iradio_flat-blue' });
// lli idemo dalje...
$('.btnNext').click(function(e) {
e.preventDefault();
var status = true;
var addScore = false;
var carray = []; carray.length = 0;
var xarray = []; xarray.length = 0;
var farray = []; farray.length = 0;
lliQuiz.currentTab++;
$('span.redx').remove();
$(".box:visible input:radio").each(function(index, value){
if($("input:radio[name="+$(this).attr("name")+"]:checked").length == 0) {
status = false;
}
if(value.value == 1 && value.checked == true) {
carray.push($(this).attr("id"));
console.log($(this).attr("id"));
}
if (value.value == 0 && value.checked == true) {
xarray.push($(this).attr("id"));
console.log($(this).attr("id"));
}
if (value.checked == true) {
farray.push($(this).attr("id"));
console.log($(this).attr("id"));
}
});
if (carray.length == $(".box:visible .question").length) {
lliQuiz.score += parseInt(pointsPerQuestion);
if (lliQuiz.score == 99) $('span.score').text(100);
else
$('span.score').text(lliQuiz.score);
addScore = true;
} else {
addScore = false;
if (lliQuiz.score == 0) $('span.score').text(0);
}
if (status == false) {
$("#lliquizContent").block({ message: lliQuiz.message1 , theme: false, timeout: 2500, fadeOut: 400, overlayCSS: {opacity: 0.1, cursor: "default"}, css: {border: '1px solid #333',width: '200px', padding: '10px','border-radius': '7px', color: 'red', '-webkit-border-radius': '7px', '-moz-border-radius': '7px' } });
exit;
} else {
$("#lliquizContent").block({ message: false , theme: false, overlayCSS: {opacity: 0.1, cursor: "default"} });
$.each(xarray, function(i,id){
$('#'+id).prevInDOM('.questionText').prepend('<span class="redx">X</span>');
});
lliQuiz.createFeedback($(".box:visible"),$('.box:visible').attr('type'),farray,addScore);
$(".feedback").fadeIn(1000);
}
});
$('.btnFeedbackNext').click(function() {
console.log('feedback poeni: '+lliQuiz.score);
if ($('.box').length == lliQuiz.currentTab) {
$('.feedback').fadeOut(200);
$('#lliquizContent').unblock();
$('.box:visible').fadeOut(200);
if (lliQuiz.score >= 70) {
$('.box:visible').fadeOut(300);
$('.box-success').fadeIn(1000);
$.hurdleNext(false);
} else {
$('.box-fail').fadeIn(1000);
$.hurdleNext(true);
}
} else {
$('.feedback').fadeOut(300);
$('#lliquizContent').unblock();
$('.box:visible').fadeOut(function(){
$(this).next().fadeIn(1000);
return false;
});
}
});
},
test: function() { alert('lli test'); }
}
lliQuiz.message1 = "Please answer the questions before submiting!";
lliQuiz.feedbackImage = "feedback.m1s29.1.png";
lliQuiz.init();
$('#initButton').click(function(){
lliQuiz.score = 0;
lliQuiz.init();
});
When you click #initButton you are adding another click event handler to your buttons.
Before you init, you should use .unbind(); to clear the events.
$('#initButton').click(function(){
// remove click handler for elements
// use .unbind('click'); specifically to remove click events
$('.btnFeedbackNext').unbind('click');
$('.btnNext').unbind('click');
lliQuiz.score = 0;
lliQuiz.init();
});
Edit: In later versions of jQuery the preffered method is using .off();
Thanks to #AnthonyGrist for pointing that out :)
Here is an example Here
I'm trying to make a better looking memberlist for my website. http://www.pimpkings.com/memberlist
<table width="100%" rules="cols" border="1" cellspacing="2" cellpadding="1">
<colgroup span="5" </colgroup>
<tr>
<td class="{memberrow.ROW_CLASS}" td align="center" width="200" valign="top" border="0" cellpadding="0">
<span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span>
<div class="avatar mini">{memberrow.AVATAR_IMG}</div>
<align="center" border="0" cellspacing="0" width="200">
<center><font face="verdana" decoration="yes" size="2" color="white">Information</font></center>
<br /><font face="verdana" size="1" color="green">Interest:</font> <br />
<span class="gen">{memberrow.INTERESTS}</span>
<br /><font face="verdana" size="1" color="green">Join Date:</font> <br />
<span class="gensmall">{memberrow.JOINED}</span>
<br /><font face="verdana" size="1" color="green">Last Visited:</font> <br />
<span class="gensmall">{memberrow.LASTVISIT}</span>
<br /><font face="verdana" size="1" color="green">Post Count:</font> <br />
<span class="gen">{memberrow.POSTS}</span>
<align="right" border="0" cellspacing="2" width="200">
<center> <br /><font face="verdana" size="2" color="green">Contact</font><br /></center>
{memberrow.PM_IMG}
{memberrow.WWW_IMG}
</tr>
</td>
</body>
Problem is when I add another
<td>
It makes it duplicate the information I am calling upon. I will actually make the code the way i am talking about so when you visit the site you will see what I am talking about. I just don't want it to duplicate any members information. so basically
Member 2. Member
Member 4. Member
Member 6. Member
Is what I mean
not
1.Member 1.Member
2.Member 2.Member
...
Is there any way possible to do this? I am using a forum website and i have access to the CSS stylesheet and where this code is. Maybe a Javascript code??? Please help asap for the code I am doing is for an open site but is needed for a soon be opened site that is being paid for. Please and thank you everyone.
Also any way of making a background image repeat for the members background table??
I'd Like to have 3 columns made that is calling on the variables listed in the code without repeat.
Thanks again
You shouldn't use tables. Welcome to the world of CSS floats. Here's a shiny new example for you:
HTML
<ul class="tableHold">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
CSS
.tableHold {
overflow: auto;
}
.tableHold li {
float: left;
width: 100px;
border: 1px solid black;
}
Here's some more information on how things work.
Here's a fiddle to play with.
HTML
<div class="tableHold">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
</div>
CSS
.tableHold {
overflow: auto;
}
.tableHold div {
float: left;
width: 100px;
border: 1px solid black;
}
Try this on http://codebins.com/bin/4ldqpak