Hey guys I need your advice and ideas on this. I have a menu that looks sort of like this
<span class="options">Option 1</span>
<div class="more">More</div>
<span class="options">Option 1</span>
<div class="more">More</div>
<span class="options">Option 1</span>
<div class="more">
<div id="slider" class="slider">
<div id="knob" class="knob"></div>
</div>
</div>
<span class="options">Option 1</span>
<div class="more">More</div>
<span class="options">Option 1</span>
<div class="more">More</div>
The .more is hidden and when the user clicks any of the .options spans it will place the HTML into a "popup" I made. Here is quick JS I did
$(function() {
$('.options').click(function() {
var theHTML = $(this).next('.more').html();
$('.popup').html(theHTML);
});
And well this isn't the way I want since when I add more detail to it (the .more doesn't say more in them) such as the MooTools Drag/Slider it doesn't work because I am duplicating the html. I also tried APPEND and after I APPEND it the whole thing goes array... Any ideas on what I should do? If you need a better example please let me know...
It did not work because you appended new HTML after whole Jquery plugins have done loaded and attached. You should have to rebind/reattach the plugin that you want.
Related
I have an html which contains many (80) small boxes with some info. All these boxes are displayed in grid.
All these boxes and tags are identical just Text is different inside each block. Each box has lets say 3 values: name, email and mobile number.
I want to swap the position of email and mobile number. It will take so much time to do manually. Is there any way or automatic process or tool by which I can just change one block and it will be applied to all others?
Code of boxes:
<div class="row gutters-40">
<div class="col-12 col-md-4 col-sm-4">
<div class="thumbnail">
<h4 class="service__title">Private limited Registration</h4>
<h2 style="font-weight: bold; color: purple; font-family: sans-serif;"><i class="fa fa-rupee"></i> 7500 Rs</h2>
<h5 class="doctype">Documents Required</h5>
<div class="docs">
<ul>
<li>Aadhar card & Pancard of Directors</li>
<li>Photo of Directors</li>
<li>Address Proof of Directors</li>
<li>Address Proof of Company address</li>
<li>Qualification & occupation of directors</li>
<li>Bank statement of Directors</li>
</ul>
</div><!--docs ends here-->
<div class="price_time">
<p class="service__paragraph" align="left" id="price"><i class="fa fa-info-circle"></i> Know More</p>
</div>
</div><!--Thumbnail ends here-->
</div>
<div class="col-12 col-md-4 col-sm-4">
<div class="thumbnail">
<h4 class="service__title">limited Liability partnership</h4>
<h5 class="doctype">Documents Required</h5>
<div class="docs">
<ul>
<li>Aadhar card of Directors</li>
<li>PAN Card of Directors</li>
<li>Passport size photo of Directors</li>
<li>Residential address proof of Director</li>
<li>Registered Office address proof</li>
<li>Appointment of auditor (ADT-1)</li>
</ul>
</div>
<div class="price_time">
<p class="service__paragraph" align="left" id="price"><i class="fa fa-rupee"></i> 7199</p>
<p class="service__paragraph" align="right" id="days"> <i class="fa fa-clock-o"></i> 10-15 days</p>
</div>
</div><!--Thumbnail ends -->
</div><!--box ends-->
</div> <!--row ends-->
As you can see my price is in last div inside p tag. I want it above h5 tag.
I have almost 80 such boxes. With multicursor and moving line up it will still take time.
I thought find and replace with regex can work but I can't evaluate how to do that. There is div class = docs is between these two elements which I want to swap, so I haven't figured out should such regex look like.
Well, I guess this is somewhat too custom task to find an out-of-box tool, so I'd suggest to write simple one of your own. Here's an outline:
open you page in browser
open dev tools Console, run a script to modify html
open dev tools Elements, copy the modified html bit
substitute the boxes part of html in your page with the modified one
if your html is modified also by some other JS, in step 1. use instead a dedicated html containing just the piece that's of interest.
Now, the script should do the following:
find all the boxes (document.querySelectorAll)
for each of them, do the necessary operations with elements, like
const elementToMove = ...
const destinationElement = ...
destinationElement.appendChild(elementToMove)
const elementToRemove = ...
elementToRemove.remove()
I have made a multiple choice quiz and when there is one on a single page it works exactly as I want it to. The issue is that I need to have multiple quizzes appear on one page and the behaviour on one quiz is affecting the behaviour of any other quizzes that appear on that same page
I've been looking online to see if there's a way for the function to handle each quiz ID separately (as if they each had their own separate function) but nothing I've found so far looks to be something I can apply to the function I already have.
Here's the Javascript
jQuery(document).ready(function(){
jQuery('.answer').click(function(event){
jQuery('.active').removeClass('active');
jQuery(this).addClass('active');
event.preventDefault();
});
});
Here's the HTML
<div id="Quiz1" class="quiz">
<div class="question">Is this a really good question?</div>
<div class="interaction">
<div class="answer" data-answer="correct">
<div class="answer-content">
<span>Answer 1</span>
</div>
</div>
<div class="answer" data-answer="wrong1">
<div class="answer-content">
<span>Answer 2</span>
</div>
</div>
<div class="answer" data-answer="wrong2">
<div class="answer-content">
<span>Answer 3</span>
</div>
</div>
<div class="response-text correct">Correct</div>
<div class="response-text wrong1">Wrong 1</div>
<div class="response-text wrong2">Wrong 2</div>
</div>
</div>
<div id="Quiz2" class="quiz">
<div class="question">Is this a really good question?</div>
<div class="interaction">
<div class="answer" data-answer="correct">
<div class="answer-content">
<span>Answer 1</span>
</div>
</div>
<div class="answer" data-answer="wrong1">
<div class="answer-content">
<span>Answer 2</span>
</div>
</div>
<div class="answer" data-answer="wrong2">
<div class="answer-content">
<span>Answer 3</span>
</div>
</div>
<div class="response-text correct">Correct</div>
<div class="response-text wrong1">Wrong 1</div>
<div class="response-text wrong2">Wrong 2</div>
</div>
</div>
Here's the CSS
.answer[data-answer="correct"] ~ .correct {
display:none;
}
.answer.active[data-answer="correct"] ~ .correct {
display:block
}
.answer[data-answer="wrong1"] ~ .wrong1 {
display:none;
}
.answer.active[data-answer="wrong1"] ~ .wrong1 {
display:block
}
.answer[data-answer="wrong2"] ~ .wrong2 {
display:none;
}
.answer.active[data-answer="wrong2"] ~ .wrong2 {
display:block
}
So, with one quiz on the page everything works as expected - Clicking each bubble will give the user a corresponding response: Correct, Wrong, Wrong2. As each bubble is clicked the css takes whichever .answer element has the .active class and displays the corresponding answer response based on the data-attribute given.
This is wonderful until I have more than one quiz on the page
When there are two quizzes on one page and you click the bubbles in the second quiz it will remove the last answer response from the quiz above it.
I need each quiz to act independently and not have one quiz affecting the others.
I hope this makes sense, I'm terrible at explaining myself.
I've set up a fiddle so you can see it in action - https://jsfiddle.net/g8qpvtcz/1/
If I understand you, you just want to be able to display more than one "response box"?
If so, this might do the job for you:
In your fiddle, change line 3 of the javascript:
jQuery('.active').removeClass('active');
to
jQuery(this).parent().children('.active').removeClass('active');
This gets the parent element of the clicked answer (i.e. the div.interaction) for the given quiz and only removes the active class in its children.
Edit
You could also just use the siblings() method. Which would be even prettier. Don't really know why I forgot about that one.
jQuery(this).siblings('.active').removeClass('active');
I have an accordion in my HTML that is dynamically populated as such -
<div class="accordion">
<div class="accordion-panel">
<div class="accordion-heading>
<a data-target="#collapse" data-toggle="collapse">{{x.header}}</a>
</div>
<div id="collapse" class="accordion-body">
....
</div>
</div>
</div>
The problem is that the data-target remains static. So all the open/close buttons only open one piece of the accordion! The solution would be to enumerate the data-target/ids based on $index, but I don't know how to do that.
Is there a way to enumerate attributes in the way that I described? Or is there another solution I can use?
Just replace data-target value with #collepse-{{$index}} and ID of body with 'collapse-{{$index}}'
Hope this might be helpful to you!!
So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!
I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>
remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.
Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.