I am using jsfiddle for the first time, and it doesn't seem to recognize the css styles. It also does not display the elements withing the tag.
Here is the saved jsfiddle page for it: http://jsfiddle.net/s5LXc/
Is there anything that I did wrong there to get the unexpected result that I did?
Thanks!
Check this working fiddle: http://jsfiddle.net/s5LXc/2/
You were missing your outermost DIV container with a class of "nav_bar".
Your HTML structure is also malformed in at least one place, such as (inverted SPAN and FORM tags):
<form name="form" method="post" id="header_search">
<span style='text-align: center; float: left;'>Search
<input type="text" size="10" id="search_string">
<input type="submit" value="Search"></input>
</form>
</span>
You show a class of 'nav_bar' but there is no such thing in your html.
You're using the wrong class in your nav container.
<div class="nav">
Instead of
<div class="nav_bar">
One thing's for sure: you reference the class nav_bar a lot in your css, but it doesn't appear in your html at all.
Related
I'm trying to add field validation to a "Contact Us" form using Bootstrap and a validation library (a jQuery Plugin) called Validetta (http://lab.hasanaydogdu.com/validetta/).
After implementing the form and the validation, though, I am noticing a problem with the z-index of the tooltip that causes it to show up beneath the next form field.
If I were dealing with normal HTML and CSS, I think the answer would be a little more clear to me, but with Bootstrap, I do not know what sort of mysticism is afoot and am having trouble finding answers on how to solve this problem in the best-practices way.
I know that Validetta is adding a <SPAN> after the form field and is applying a custom CSS class to it, which I can easily modify, override, or append. I've also read, in other contexts, that this problem can be solved using a combination of z-index and position on the tooltip SPAN and one or more of its parent elements... but all of my quick tests and trials have not had the desired affect.
Here's the rendered HTML for the form field shown above:
<div class="form-group has-feedback has-error">
<label class="control-label" for="inputFromName">Your Name</label>
<input type="text" class="form-control" id="inputFromName" name="fromName" placeholder="Your Name Here" data-validetta="required" data-vd-message-required="This field is required!">
<span class="validetta-bubble validetta-bubble--bottom">This field is required!<br></span>
</div>
Any help would be much appreciated!
you may check the z-index attribute on parent elements of "validetta-bubble" ;
because z-index judge from parent to child, if a parent has a lower z-index while child elemtn has a higher this element's z-index finally work base on the parenet's
you may try to set form-group's z-index
.form-group {
z-index: 10000;
position: relative;
}
and set a higher on target like answer 1
.crazy-zindex {
z-index: 10001;
}
Ultimately, I found the answer to this question here: z-index of hover tooltip with CSS
The answer from Панайот Толев provided this example:
<div class="level1">
<span class="level2"> 1 </span>
<span class="level2"> 2 </span>
<span class="level2"> 3 </span>
</div>
So, to solve the problem, I wrapped each row of form elements in a div that specified a z-index in the style attribute. As I went down the rows, I decreased the z-index value, like so:
<div style="z-index: 23;"> .. </div>
<div style="z-index: 22;"> .. </div>
<div style="z-index: 21;"> .. </div>
This ensured that each row fell "behind" the one above, which allowed tool-tips to appear on top of the fields (and labels), rather than beneath them.
I had same issue.
When no other script solved my problem. Then I had used parent class as data-container.
For exp.
<ul id="responsivator">
<li data-placement="bottom" data-toggle="tooltip" data-container="#responsivator" title="iPhone landscape Preview" >
</ul>
I would add a custom class like crazy-zindex (I'm sure you can come up with a better name) and a rule in the css for it.
HTML
<span class="validetta-bubble validetta-bubble--bottom crazy-zindex">This field is required!<br></span>
^^^^^^^^^^^^
CSS
.crazy-zindex {
z-index: 10000;
}
Its important to remember that CSS is cascading, so the last rule will overwrite anything above it, with this said, any overwrites you want to do to bootstrap you'll have to link that stylesheet after bootstrap. Or you can use !important but that's not good practice.
I want to remove/hide the element inside the parent in specific range. Is that possible in jquery?
<body class="page page-id-5269 page-parent page-template-default logged-in kleo-navbar-fixed navbar-resize js" itemtype="http://schema.org/WebPage" itemscope="">
<p>Your account is not setup as a vendor.</p>
<form action="" method="POST">
//....
</form>
<br class="clear" style="display: none;">
//other element here that should be display ...
</body>
on the code above i want to remove element inside the body tags but until in <br class="clear"> only. The element that i want to remove is dynamically generated it can be div, p, span, etc...
Currently i have code like this but it will remove only the specific element (not dynamicaly):
$('body.page div').first().hide();
Please help. Thank you!
That is you want to hide all the previous siblings of br.clear element which is a child of body.page so
$('body.page > br.clear:first').prevAll().hide();
This might be solution:
$('body.page').find('*').each(function(){ //iterating all children
$(this).hide();// removing elment
if($(this).is( "br.clear" ))//checking element is br having class clear
return false;// breaking loop
});
See DEMO: Instead of using body i have used div.container.
I want to copy all the child elements of parent div into the text box using jquery.
I tried to find the solution over stackoverflow and google, but did not find any solution. Please help, i will be very greatful. Thanks in advance
<div id="hello">
<div class="sub1">Hello how are you</div>
<div class="sub2">Hello how are you</div>
<div class="sub3">Hello how are you</div>
</div>
</div>
I want to copy all the children elements in the text
The output should come like this:
<input type="hidden" value="<div class="sub1">Hello how are you</div><div class="sub2">Hello how are you</div><div class="sub3">Hello how are you</div></div>" id="textbox">
use html() to get the all the dom and text value
$("#textbox").val($("#hello").html());
Try this
alert($("#hello").html())
$('input:hidden').val($("#hello").html())
to achieve this you can do as below:
var values=$('#hello').html();
$('#textbox').val(values); // textbox is the id of hidden field you specified
I am trying to select those input fields on page to validate which are visible on layout. I am able to find out this through one way but with another way its not actually working. What I am getting is my selector is working for direct child but not for grand children.
I want to select only those elements ids which are actually visible on layout to validate them as they should not be blank.
Jsfiddle Demo
HTML
<div id="createdDiv1">
<div id="row11">
<div class="hide">
<input type="text" class="blk" id="inp_11"/>
</div>
</div>
<div id="row12">
<div>
<input type="text" class="blk" id="inp_12" />
</div>
</div>
</div>
<div id="createdDiv2">
<div id="row21" class="hide">
<div>
<input type="text" class="blk" id="inp_21" />
</div>
</div>
<div id="row22" class="">
<div>
<input type="text" class="blk" id="inp_22" />
</div>
</div>
</div>
<button onclick="subCheck('#createdDiv1 :visible')">check 1st</button>
<button onclick="subCheck('#createdDiv2 :visible')">check 2nd</button>
JavaScript
function subCheck(inBlock) {
inBlock=(inBlock==undefined)?'':inBlock;
var ids=[];
$(inBlock+' .blk').each(function(){
ids.push($(this).attr('id'));
});
console.log(ids);
}
CSS
.hide{
display:none;
}
Note: I don't want to change my subCheck() function since its generalized for all valiations, what I need to know how can I make it work with :visible selector or something similar to it to work with multi-levels checks for visible elements.
Sorry If I am making it ambiguous for you. I am not sure what exactly to explain in words.
use :not to exclude the class .hide:
<button onclick="subCheck('#createdDiv1 .inputDiv:not(\'.hide\')')">
check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:not(\'.hide\')')">
check 2nd
</button>
Fiddle: http://jsfiddle.net/Z4PSV/1/
Although I wouldn't suggest using onclick at all though, instead:
<button class="subcheck" data-id="createdDiv1">check 1st</button>
<button class="subcheck" data-id="createdDiv2">check 2nd</button>
<script>
$(document).on('click', '.subcheck' function() {
//Creates string as: '#createdDiv1 .inputDiv:not('hide')
var ft = "#" + $(this).data('id') + " .inputDiv:not('.hide')";
subCheck( ft );
});
</script>
Fiddle: http://jsfiddle.net/kY8Wh/
Lastly, if you were wishing to implement your :visible then:
<button onclick="subCheck('#createdDiv1 .inputDiv:visible')">
check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:visible')">
check 2nd
</button>
Fiddle: http://jsfiddle.net/Zgm78/
Would be sufficient too.
The issue is that you scan all the inner .blk elements of a visibile top element using each, in this case the element itself is visible, but hidden from the middle parent.
I know you won't change your subCheck function, bu you can simply solve the issue by checking there the visibility of the child element .blk.
Visibile selector take care of the effective visibility of the element (direct or nested):
Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero.
Elements with visibility: hidden or opacity: 0 are considered visible,
since they still consume space in the layout.
Elements that are not in a document are considered to be hidden;
jQuery does not have a way to know if they will be visible when
appended to a document since it depends on the applicable styles.
I think that this change will not break anything in your code.
Code:
function subCheck(inBlock) {
inBlock=(inBlock==undefined)?'':inBlock;
var ids=[];
$(inBlock+' .blk:visible').each(function(){
ids.push($(this).attr('id'));
});
//console.log(ids);
alert(ids);
}
Demo: http://jsfiddle.net/IrvinDominin/her4Y/
I have an HTML5 page structure like this:
<article id="article_id">
<div></div>
<div> </div>
<div> </div>
<form id="form_id">
<input id="" onsubmit="submit()"/>
</form>
</article>
Now I want to add a new div after div and before form. How should I do it?
I have tried:
$("#form_id").befor('<div id="div_id" class="block">');
$("#form_id").parent().befor();
$("#form_id").after('<div id="div_id" class="block">');
The HTML code works fine.
First of all, it's before. Secondly, you must pass an argument to it. The html that you will put before the form.
$("#form_id").before('<div class="block"></div>');
demo http://jsfiddle.net/uHrKG/1/