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 7 years ago.
Improve this question
So I have a 'form search' function script that I am trying to apply to items within a container. I have found this from a tutorial online that someone used to search members of teaching staff. only I am looking to apply this to my div classes:
$('.form-search').on('submit',function(){return false;});
$('.form-search .btn').on('click', function(e){
var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
$('div.dress-container .bold').each(function(){
var $this = $(this);
if($this.text().toLowerCase().indexOf(query) === -1)
$this.closest('div.dress-container').fadeOut();
else $this.closest('div.dress-container').fadeIn();
});
});
Here is the jsfiddle - I was trying to pull the image and text using the JS and class but it would not work:
http://jsfiddle.net/lmac1/x6kv91qk/
Can anyone point me in the right direction? I was using this JQuery hide all divs except for the divs I search for
The problem is that your <div class="dress-container"> is currently wrapping all of your products, therefore you keep on hiding all of them once you use the searchbar.
I fixed your html markup here and removed the <div class="row"> so they line up nicely when you have filtered them:
http://jsfiddle.net/j7c4kdy3/3/
Related
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 7 years ago.
Improve this question
For some strange reason this simple click function I've added, which should be adding the 'big' class to the clicked divs, is only working for every other div.
See an example here (click the square boxes with images)
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
Here is a fiddle but I chose not to post this as it works fine as it should do. The error is caused by some other element but I don't know what
http://jsfiddle.net/Ly1bxswq/1/
You binding your click handler within a loop, but need to do it only once when all elements added to page.
$.each(data.feed.entry, function (i, entry) {
// ...
$container.append(item);
// ...
})
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
}
As pointed out by #Yan Brunet's comment, it would be much better to delegate the event from every .box to their parent. That way you can bind your handler at any point (even before .box elements are added to page)
$container.on("click", ".box", function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
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 am building an expandable grid portfolio but the styles for the .showcase <a> tag and <p> tag are not showing up. I am not sure why. I think it has something to do with .html() not grabbing the <a> and <p> selector but just the content inside it. Though this does not happen to the <img> tag. I am a little baffled. Here is my jsfiddle
http://jsfiddle.net/theMugician/L2xyatfd/38/
Hey everyone I figured out what my problem was. I was calling html() twice which makes a lot of sense now. In the variables $aTag and $html I didn't need to call the html() because I was going to call it again in the .showcase div.
var $aTag = $a.eq($item.data('rel'));
var $html = $p.eq($item.data('rel'));
<!---.showcase div--->
$link.html($aTag).show(0);
$details.html($picture).show(0);
Here is the new fiddle
http://jsfiddle.net/theMugician/L2xyatfd/47/
Simply try :
var $aTag = $a.eq($item.data('rel'));
var $html = $p.eq($item.data('rel'));
$link.append($aTag).show(0);
$images.append($picture).show(0);
It will wrap the element, not just its html content
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have a div which is like this:
<div id="mainDiv">
<script>
javascript here...
</script>
</div>
I basically want to get the ID of the div it is inside.
I have tried using jQuery and classic javascript to do this but it keeps returning undefined.
Does anyone have any idea's? Thanks
Since broswer read the code from up to down, you can do this:
Vanilla JS
var scriptTags = document.getElementsByTagName('script');
var id = scriptTags[scriptTags.length - 1].parentNode.id;
jQuery
var id = $('script').last().parent().prop('id');
when it will read this code, the last script tag is the one the browser is reading.
Here's a fiddle : http://jsfiddle.net/nb234/
Check this out http://jsfiddle.net/78N9A/1/
<div id="parent">
<script id="scr">
function show()
{
alert('hello');
}
</script>
</div>
window.onload = function(){
var ele = document.getElementById('scr').parentNode;
alert(ele.id);
}
<script id="script">
Then
$('#script').parent();
If I understand correctly, you are saying that the id on the parent div is unknown in advance, and you want to use JS to determine what it is.
If you can't edit the script tag to add an id, maybe you could do a document.write() within that block to add in a little hidden element, then you can test to see what that element's parent is.
http://jsfiddle.net/AtRYF/
JAVASCRIPT:
Give your script an ID and then use parentNode to move up the DOM.
var the_div_you_want = document.getElementById("skript").parentNode.id;
JQUERY:
Pretty sure .parent() is what you're after
$('#scriptId').parent().attr("id");
Regardless, you need to find some way to locate the script and the move up the dom to find that relationship. Hope this helps.
http://jsfiddle.net/Zbuf8/1/
jQuery(document).ready(function($) {
$('div').attr('id');
});
should get you the value you need.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Example is in the header
I've been trying to do something like the header of this portfolio for a while. Where you can get different remarks on the same line by clicking the arrow. It also doesn't refresh anything which is neat. I just dont know to how phrase the question. I finally found this example. Can anyone help me with the JS or jQuery code? Sorry if this has been answered before I've tried phrasing it so many different ways but can't seem to find the answer.
Easy mode! Here's a working demo on jsfiddle
Setup some html
<p>
I'm a <span id="remark">Panda</span> bear.
<button id="nextRemark">refresh</button>
<img src="http://i.imgur.com/cFadsAE.gif" id="spinner"/>
<p>
Write some JavaScript (with jQuery)
$(function(){
var remarks = ["Koala", "Kangaroo", "Circus", "Grizzly"],
spinner = $("#spinner"),
delay = 1000;
$("#nextRemark").click(function(event) {
var button = $(this);
// display spinner, hide button
spinner.show();
button.hide();
setTimeout(function() {
var r;
// display remark
if (r = remarks.pop()) {
$("#remark").text(r);
}
// no more remarks
else {
$("#remark").text("dead");
button.remove();
}
// hide spinner, show button
spinner.hide();
button.show();
}, delay);
event.preventDefault();
});
});
It doesn't have fancy animations or superfluous delays, but that's the gist of it.
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 8 years ago.
Improve this question
Hello i have been trying to make a dynamic collection that i can post to the server, after some struggeling i found this guide;
http://jarrettmeyer.com/post/2995732471/nested-collection-models-in-asp-net-mvc-3
Great written but i havent got it to work for my needs.
Everything works fine exept one "little" annoying thing.
First some information about what im trying to achive;
My classes looks like this;
Qpack has a list of questions
question has a list alternatives
The interface that i have created looks like this;
And this is the markup.
The "add Question"-button works great and the markup match, The thing that dosent work is that wen i click on "Add Alternative" it is always being added to the first question. But the markup is fine as seen in the second picture.
The function responsible for the append looks like this;
function addNestedForm(container, counter, ticks, content) {
var nextIndex = $(container + " " + counter).length;
//var nextIndex = $(counter).length; // Orginal
var pattern = new RegExp(ticks, "gi");
content = content.replace(pattern, nextIndex);
$(container).append(content);
resetValidation();
}
I want to append to the most relative "alternatives" but it seems that it always goes for the first, any idea how to get it to understand the "nearest" alternatives?
When a jQuery selector specifies an ID (#) and there are multiple IDs in the Html document that have that Id jQuery will always return the first.
You must have a way to specify the "Alternatives" uniquely throughout your page.
Alternatively (pun intended) you can create a new css class, replace
<div id="alternative" ...
with
<div class="alternative-container" ...
Then on your action of "Add Alternative" you can
var container = $(this).parents('div.alternative-container:first');