I integrated Jasny Fileinput Widget into my existing form. When I select new file, It will display two button: Change and Remove. I think Change button is not neccessary in this case so I would like to remove this button completely. By adding style="display:none" to the element and I also try to remove this element. However, this still appear a blank spot like this:
jsfiddle.
MY HTML:
<div class="fileinput fileinput-exists" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span style="display:none" class="fileinput-exists">Change</span><input type="file" name="file[]"></span>
Remove
</div>
</div>
Any suggestions how to remove this completely please?
It doesn't look like you'll be able to remove that button completely. As that button belongs to the file input, you can't remove it. You could however write custom styles to hide the file input button but it may hide other buttons that are associated with it.
Sorry I couldn't help any further mate.
Related
I have a simple website, using php, html, css,
and would like to hide two menu buttons:
menu box & text
<div class="filter margin"></div>
<div class="filter_options">
<div class="filter_op filter_op_selected" data-type="type" data-id="bla 1">
<div class="filter_check"></div>
<div class="filter_value">bla</div>
</div>
<div class="filter_op " data-type="type" data-id="bla 2">
<div class="filter_check"></div>
<div class="filter_value">bla</div>
</div>
Still it is necessary, that the upper box is ticked & as such recognized by the code;
for the correct work-logic of the menu.
Thanks for any tip or suggestion.
[I know that in the code language mql4/5, which is based on php, you can simply hide a line of code when typing # in front of it.
It won't be shown, but it will be used (if such a box is hidden but ticked, it will behave like that).
I was asking myself how to do that in php]
After researching a lot, I've come to the following answer:
<div class="filter margin"></div>
<div class="filter_options">
<div
class="filter_op filter_op_selected"
data-type="type"
data-id="bla 1"
style="height: 0; visibility: hidden; font-size: 0; padding: 0; margin: 0"
>
<div class="ranking_filter_check"></div>
<div class="ranking_filter_value">bla</div>
</div>
</div>
I successfully implemented the Bootstrap popover after some trying...
Now I want to implement another HTML into the popover. Normal Tags like <p align=center>some text</p>
are working, but if I add some quotes, it doesen't work anymore:
" data-placement="top">...
Then I tried this:
" data-placement="top">...
I also tried to replace the content of the data-content-attribute with <?PHP echo '...' ?> but that didn't work too.
Can anyone help me please?
Edit: Actual code
<a href="myFacebookPage" rel="popover" data-content='<div style="width: 100px; height: 200px;" class="fb-like" data-href="myFacebookPage" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>' data-placement="top" target="_blank">
<img src="theUsedIcon"
</a>
In the options for the popover you'll note that it states to use the html option set to true, because if false, jQuery's text method will be used to insert content into the DOM. It also warns that the default value is false, and you should use text if you're worried about XSS attacks.
So, try writing your link this way instead:
<a href="myFacebookPage" rel="popover" data-content='<div style="width: 100px; height: 200px;" class="fb-like" data-href="myFacebookPage" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>' data-placement="top" target="_blank" data-html="true">
<img src="theUsedIcon">
</a>
Ok thanks for your answers :)
I replaced the javascript Like-Button with the iFrame Like-Button and now it's working.
I have a toggle that I am using for twitter bootstrap, and one of the words is poping out and not staying inside the toggle, I highlighted the messed up word in a red box below:
My code is:
<div class=\"span9 space\">
<h3 class=\"title pull-left\">$name</h3>
<link rel=\"stylesheet\" href=\"lib/prism/prism-light.css\">
<script src=\"lib/prism/prism.js\"></script>
<link rel=\"stylesheet\" href=\"toggle-switch.css\">
<form class=\"form-horizontal pull-right\">
<div class=\"control-group\">
<label class=\"control-label\"></label>
<div class=\"controls btn disabled switch switch-two\">
<input id=\"week9\" name=\"view\" type=\"radio\" checked>
<label for=\"week9\" onclick=\"\">Not Visited</label>
<input id=\"month10\" name=\"view\" type=\"radio\">
<label for=\"month10\" onclick=\"\">Visited</label>
<span class=\"slide-button btn btn-warning\"></span>
</div>
</div>
</form>
</div>
The toggle I am using is from here:
http://ghinda.net/css-toggle-switch/bootstrap.html
Here is also my live code:
http://www.beerportfolio.com/breweryPage2.php?id=BSsTGw
The issue is that the Switch class does not stretch for your words,
you can solve it by hardcoding the width in the switch class in your style sheet or by adding it in the div you want stretch and this should solve your issue
<div class=\"controls btn disabled switch switch-two\" style=\"width: xxxpx !important;\">
while xxx represent the value you need
I did a live edit on the demo you supplied and used your values for the items and added a smaller width than what is needed and the visited part of 'Not Visited' went to a new line. You might want to have a larger width for your toggle item(s).
EDIT:
It looks like you did modify some of the css or it inherited some, you can modify it any way you want but try:
toggle-switch line 210
.toggle label,
.toggle p,
.switch label {
line-height: 13px;/*30px*/
}
and remove:
bootstrap.min.css line 333
.form-horizontal .controls {
margin-left: 0;/*180px*/
}
I am developing a page in WP where I have a set of posts on a page, these are added in a slideshow and under that there is a hidden div where the posts gallery images are hidden, these galleries are split into the posts and are generated just like the post slidshow except these containers are the actual posts content.
When you click on a slideshow item it toggles the visibility of that related project in the hidden container and shows it above the slider and you can then close it to clear the div. Currently I have this working on buttons as a test as you will see below.
The markup below generated via wordpress query posts:
Buttons that link to the posts create by a javascript loop counting the amount of posts:
<button class="toggles">work-1</button>
<button class="toggles">work-2</button>
<button class="toggles">work-3</button>
There is then a hidden container called .project under it that is made visible when you click on a project:
Here is the markup:
<article class="post royalSlider rsMinW"id="work-2 Exposure">
<img src="http://2mz:8888/wp-content/uploads/2013/02/interactive_table2.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">interactive_table</span>
<span class="rsABlock txtLeft col2" data-move-effect="none">
</span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_build_03.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_build_03</span>
<span class="rsABlock txtLeft col2" data-move-effect="none">
</span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_build01.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_build01</span>
<span class="rsABlock txtLeft col2" data-move-effect="none"></span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_build02.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_build02</span>
<span class="rsABlock txtLeft col2" data-move-effect="none"></span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_detail.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_detail</span>
<span class="rsABlock txtLeft col2" data-move-effect="none">
</span>
</div>
</article>
The problem I am having is that I have some javascript that basically links the top buttons with a prefix of #work- to the ids of the actual hidden projects with the same id="#work-1,2,3...etc" like so:
var projects = $('.project section article[id^="work-"]');
var num = projects.length;
//var nav = $('.projects section article')
console.log(num);
for (i=1; i<=num; i++) {
$('<button class="toggles" />').text('work-'+i).appendTo('#site-logo');
}
$('.toggles').live('click',
function(){
var thisIs = $(this).index();
$('.projects > .project section article[id^="work-"]').eq(thisIs).toggle();
$('.project').fadeIn(1000, 'easeInOutQuart');
});
It works but it always leaves out the last project so I can make 2 of them work but then one of the projects that is linked to the button will not work at all.
Has anyone got an idea as to why it will not work or a better way to do this?
Thanks,
Mark
Inside your live-click function, thisIs is zero indexed, so it doesn't actually match the name of what you're clicking. You don't have the whole markup for your project section, so I can't tell if that's the problem, but you say
links the top buttons with a prefix of #work- to the ids of the actual hidden projects with the same id="#work-1,2,3...etc"
Which implies that it should match up: the work-1 button should display the work-1 project, not work-0 as you're getting.
So you could add 1 to the index:
var thisIs = $(this).index() + 1;
Or, you could append the click handler as you're creating the elements.
for (i=1; i<=num; i++) {
$('<button class="toggles"/>')
.text('work-'+i)
.attr('button-index', i)
.appendTo('#site-logo')
.bind('click', function() {
var buttonIndex = $(this).attr('button-index');
// prove the index is correct
console.log(buttonIndex );
// rest of the click handler code=
$('.projects > .project section article[id^="work-"]').eq(buttonIndex ).toggle();
$('.project').fadeIn(1000, 'easeInOutQuart');
});
}
This renders your button markup as the following:
<button class="toggles" button-index="1">work-1</button>
<button class="toggles" button-index="2">work-2</button>
<button class="toggles" button-index="3">work-3</button>
I personally like setting data I need as attributes on the dom elements they relate to, it makes it much easier to see what's going on. And pulling data from the attributes is unlikely to change in jQuery, whereas you're likely to shoot yourself in the foot with the .index() function if you move where you're calling it from or tweak your query.
Finally, note that .live is deprecated in jQuery 1.7 and removed in 1.9, so you might want to upgrade and proactively change any other of your handlers using it to .on
I needed to use an hidden input to transfer some IDs to the page for each block.. whatever.
I have the following code :
<div id="shipping_box" class="formSep well">
<div id="default_shipping_box" class="shipping_box row-fluid">
<div class="span1">
<input type="hidden" name="tracking_id" value="" />
</div>
</div>
</div>
This code work well and the result is what I expected.
If I do this :
<div id="shipping_box" class="formSep well">
<div id="default_shipping_box" class="shipping_box row-fluid">
<input type="hidden" name="tracking_id" value="" />
<div class="span1">
</div>
</div>
</div>
The layout is not respected. See this picture for the demostration :
Can someone explain why to me ? Hidden input aren't suppose to be "hidden" so they shouldn't affect the layout ?
jsfiddle : http://jsfiddle.net/t9M3C/
Near line 285
Is because you have a css rule (in bootstrap.min.css file) that match the firs-child element (but only if has a class*="span") inside the default_shipping_box div.
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
So, if you put your hidden input inside the div#default_shipping_box and before the first span, then that rule is not styling the div.span1 and thats why your template is been afected.
You can fixed adding a simple css rule to the same file...
.row-fluid .span1{margin-left:0 !important;}
The important, is because you have more files who overite this rule (ex. in bootstrap-responsive.min.css)
Good luck, and i hope it helps
cheers,
Gmo.-
EDIT:
Too slow XD.
Answered while writing ... I agree with the reason explained above.
Using Google Chrome's Inspest Plugin, when you move the input this class:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
Gets removed.
This is because in this:
<div id="shipping_box" class="formSep well">
<div id="default_shipping_box" class="shipping_box row-fluid">
<input type="hidden" name="tracking_id" value="" />
<div class="span1">
</div>
</div>
</div>
This : <div class="span1"> is not the first child, this: <input type="hidden" name="tracking_id" value="" /> is.
and in your CSS this is that default class for [class*="span"] is:
[class*="span"] {
float: left;
margin-left: 30px;
}
So use this for example :
.row-fluid .span1 {
margin-left:0 !important;
}
Hope this helps.
Bootstrap has some CSS that will set the left-margin of the first of the child to 0, if the class contains span:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
When the hidden input is put above the first span div, the above margin-left: 0; property will not be applied.
The following image shows that when the hidden input is before, then the first span class has a left-margin.
This shows that when the hidden input is after the div, that there is no left-margin.
EDIT: I seem to have a been beaten twice, while I was getting the screenshots to illustrate the difference!