I can't seem to figure out why my search button jumps to the second line. As far as I can tell, I only have it set to be one line (45px) thick and it is ignoring that. Help please?
http://www.bootply.com/EwP07rHc52
Forgot to add the script i'm using to actively change the button appearance.
$(document).ready(function(){
// select element styling
$('select.select').each(function(){
var title = $(this).attr('title');
if( $('option:selected', this).val() != '' ) title = $('option:selected',this).text();
$(this)
.css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
.after('<span class="select">' + title + '</span>')
.change(function(){
val = $('option:selected',this).val();
$(this).next().text(val);
})
});
});
You have whitespace in your code and your input element is set to display as inline-block and not floated properly. That's what's causing that extra space that doesn't show up in Dev Tools.
If you change float: center to float: left on that .summonerSearch element, it will be fine.
See it here: http://www.bootply.com/ZIsn1phtco
Related
Im trying to do; show divs when click on check-box radio button. I made it with jquery but when you load page all my divs are visible. You have to click my first check-box radio button to make other divs invisible. or just click other check-box radio buttons.
I tried
#row2 {
display:none;
}
But when I added this to css, if you click first check-box radio button(which is related to div row2) div is not visible and and it is not working.
Any other solution for when you open page I just want to see only div (row2) which is checked. I dont want to see other divs when page load.
Thanks...
Demo Link: https://rexin-demo.netlify.app/main.html
Ps: Pics and button are not visible on jsfiddled cuz of assets. Better to look it via demo link.
https://jsfiddle.net/t4e13xvj/
Trigger the click by adding .filter(':checked').click() at the end of the input's click event .. Try it
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var inputValue = $(this).val(); // use .val() instead of .attr('value')
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}).filter(':checked').click();
});
Also I prefer to use change instead of click for radio and checkbox inputs
$(document).ready(function(){
$('input[type="radio"]').on('change' ,function(){
if(this.checked){
var inputValue = $(this).val();
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}
}).filter(':checked').prop('checked' , true).change();
});
OR With only css you can use
.box:not(.product){
display : none;
}
Is there a way I can use a button(input type="button") to show the Bootstrap modal. Basically the default is using anchor based on the documentation. I have tried experimenting but no luck.
I'm not sure if my coding is wrong or the Bootstrap modal can only be activated if it is an anchor tag. I have also tried googling or researching if anyone has created this kind of result.
This should work the same way as with an anchor tag.
The problem is, it's based on the href attribute, referring to the id of the modal window, and placing this attribute on a button might cause some html validation to go wonky.
If you don't care about that kind of stuff you can just replace your a tag with a button tag.
Edit: just noticed you were using an input element rather than a button. Either way, it should still work.
Edit2: Just verified if what I was saying wasn't total BS by looking at the bootstrap code (2.3.2), and found this snippet:
$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
, href = $this.attr('href')
, $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
, option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())
e.preventDefault()
$target
.modal(option)
.one('hide', function () {
$this.focus()
})
})
Looking at this, the href attribute isn't required, and you can use data-target instead when working with inputs and buttons.
simply u can fire event on Button Click and call function "onclick=showModal()"
JS CODE
function showModal()
{
$("#modal-window-id").modal("show");
}
I use Twitter Bootstrap's input-prepend class with <textarea>. When I set <textarea>'s number of rows = 1, all looks fine. But when I set it to any bigger value, element becomes larger than input-prepend span.
This is the demonstration: http://jsfiddle.net/2smRF/
How to set the span's height to <textarea>'s height? Can it be achieved using only CSS or I need to use JavaScript?
I don't think this would be easily achieved only with CSS, so I threw together a script for you. Please note that it will not work if the user resizes the textarea.
var onRes = function(){
$('.input-prepend').each(function(){
var $textarea = $(this).find('textarea');
var $span = $(this).find('span.add-on:eq(0)');
console.log($span);
$span.height($textarea.outerHeight()-(parseInt($span.css('padding-top'))+parseInt($span.css('padding-bottom'))+parseInt($span.css('margin-top'))+parseInt($span.css('margin-bottom'))+(parseInt($span.css('border-width'))*2)));
});
};
$(window).resize(onRes);
onRes();
JSFIDDLE
So I have this:
clicking here
<a name="link">goes here</a>
Simple, but the problem is that my site has a fixed position header that stays at the top of the page, so when a user clicks on the link, the place I want them to go to is hidden by the header. So I guess where I really want them to end up a certain amount of pixels above what I actually want them to see. I've tried putting the destination link above where I want them to end up, but it's a block of text so it changes with different screen sizes and therefore isn't consistent.
I'm wondering if there is any way to solve this problem, perhaps something with css.
Thanks in advance.
I realise this is over a year old, but for the benefit of anyone else who comes across it:
A slightly simpler solution is to put padding at the top of the section you are targeting with the link.
HTML:
<section id="section_name">
...Your stuff here...
</section>
CSS:
#section_name {
padding-top: 40px;
}
You could use a jQuery method so that when a link with a # is clicked, it finds the position of the element it's meant to go to and then moves to a position X number of pixels above the target.
Something like this:
$(function(){
var positionOffset = 50;
$('a[href=*"#"]').click(function(){
var targetHash = this.hash;
if(targetHash.length > 0 && targetHash == window.location.hash){
var elementPosition;
if($(targetHash).length){
elementPosition = $(targetHash).offset();
} else {
var targetAnchor = targetHash.replace("#", "");
elementPosition = $('a[name="' + targetAnchor + '"]').position();
}
$(window).scrollTop(elementPosition.top - positionOffset);
return false;
} else {
return true;
}
});
});
I'll try to explain:
I have numerous div classes, but for the sake of simplicity, let's say I only have 3.
Someone is viewing DIV 1, and I want to give them the option of only printing DIV 1, omitting 2 and 3.
However, on the same page, I would like to give them the option to ONLY PRINT DIV 2. Or only print DIV 3.
I think I get how you can omit certain things from getting printed. But how can you select a section here or there on the same page to be printed with a print link.
Thanks,
Tracy
You can use jQuery to show/hide divs. Read the jQuery tutorial:
http://docs.jquery.com/Tutorials
The code will look this way:
<script>
function showDiv(n) {
$('.divs').hide();
$('#div_'+n).show();
}
$(document).ready(function() { showDiv(1); });
</script>
<a href='javascript:showDiv(n)'>show div n</a>
<div class='divs' id='div_n'>I'm div n</div>
There are many related posts on printing div content, this particular question was still open though it was asked in '10.. Following JavaScript function can be used for printing content of a selected Div tag. Hope this helps. Declaimer: I used some of the existing answers, fixed/enhanced code/error(s) to work with (and tested on) IE-8.
function printDiv(divName) {
var divToPrint = document.getElementById(divName);
var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', '');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function () { newWin.close(); }, 10);
}
Call printDiv from anywhere in page or from within selected Div. Here is test link:
Print Customer Data
Print Order Data
Assign respective IDs to Div that is to be printed:
<div id="divCustomerData">Div Contents goes here... </div>
The only catch right now is it loses css styles. I'll update response when i get a chance to fix it. Thanks.
https://github.com/jasonday/jquery.printThis
I would give each div an id, and then using the above plugin (i wrote) specify according to div id.