i am trying to make my popover draggable, but when i drag it, it jumps based on the position in DOM, because its position is set to top:0 and left:0 and it uses transition to change position. Does anybody know how to solve this?
HTML
<div class="row">
<div class ="col-auto">
<h2>
sendhelp
</h2>
</div>
</div>
<div id="Normal">
<a class="btn btn-primary draggable">Popover</a>
</div>
JS
$(".draggable").popover({
html:true,
content: "<p>Drag me</p>"
}).popover('show');
$('.popover').draggable();
Here is an example in jsfiddle:
Example
Try to drag that popover and you will see the jumping.
Seems like margins are interfering from css. Try adjusting those.
Related
I use materializecss to create a slider.
However the image is full width, but not full height(its more than full height, so i get scrollbars). What do i need to change to make the slider fill out my screen with no scrollbars? I also use $('.slider').slider({full_width: true});
<div class="navbar-fixed">
<!-- some stuff-->
</div>
<div class="container-fluid">
<div class="carousel carousel-slider center">
<a class="carousel-item"><img class="responsive-img" src="http://lorempixel.com/800/400/food/1"></a>
</div>
</div>
If you just want to hide scrollbars then add
overflow: hidden;
To container which is having the scroll
Are you using the correct JavaScript?
On Materialize's site (I've used Materialize before, and thought something looked off about your code) it has this as the way to initialize a slider as "full_width:"
$('.carousel.carousel-slider').carousel({full_width: true});
In fact, your slider doesn't even have the .slider class; it only has .carousel-slider and .carousel.
I'm thinking if you use the above JavaScript you should be alright.
I'm trying to implement this signaturePad https://github.com/szimek/signature_pad, and when I tried in a single page it works fine, but the problem comes when I try to put inside a div, which is hidden at the begining, then the pad doesn't work. I think is a canvas problem with the resizing, but I don't know how to solve it.
This is my code:
<div class="col-sm-9 col-md-10 message-list">
This is the first div, which I hidde when click on a row
</div>
<div class="col-sm-9 col-md-10 view-message" style="display:none" >
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Sign above</div>
<button type="button" class="button clear sign_btn" data-action="clear">Clear</button>
<button type="button" class="button save sign_btn" data-action="save">Save</button>
</div>
</div>
and this is the js part:
$(document).ready(function() {
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('display','none');
$(".view-message").fadeIn('slow').css('display','block');
});
});
I loaded all the js and css required and it is working in the main view, but not when I go through a button and change the div to block. I tried to read the documentation, but is not very clear.
Use: height: 0; overflow: hidden;
instead of: display:none
It works for me.
Can you try setting visiblity hidden instead of display:none ?
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('visibility','hidden');
$(".view-message").fadeIn('slow').css('visibility','visible');
});
});
CSS manipulations didn't work for me. Instead of playing with CSS, I didn't render the signature pad until the user was ready to sign. I.e. wrap the signature pad component with the condition that listens to some event.
I am working on a wordpress page and i want to set a fixed image and 3 different texts at the the bottom of it.
What I want to do is that when the mouse hover on Text1 the top image changes, when the mouse hover Text2 the top images changes again.
Example: http://fr.muaythaitv.com/pages/helpcenter/advertise.php
I searched on internet but couldn't really find what I'm looking for, hope someone can help me!
You mean something like this ?
HTML markup.
<div id="gallery2">
<div id="panel">
<img id="largeImage2" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs2">
<a href="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
jQuery :
$('#thumbs2 a').hover(function(){
$('#largeImage2').attr('src',$(this).attr('href'));
});
Css at your will ..
See Here again - it´s the second example is a live link, the third is anchor disabled link.
I tried to align two buttons (Apply and Cancel) to a div in order they always be on the bottom of specific div. I tried with position, navbar bottom and a lot of specifications but I can't fixed them. Any help will be preciated.
The main idea is that even when the user expand some collapse element, the buttons don't move to up or down.
Answer here didn't work, maybe for the collapsed control?
Also I've a bottom footer in the page, I don't know if that is a problem.
JS: Fiddle: http://jsfiddle.net/Leandro1981/Mk692/2/
Buttons code:
<div class="container">
<button type="button" class="btn btn-danger pull-left">Cancelar</button>
<button type="button" class="btn btn-success pull-right">Continuar</button>
</div>
Initial State:
Wanted State:
Actual State (error):
I think the easiest way to do that is to add this CSS:
.panel-group {min-height: 258px;}
I've updated the fiddle: http://jsfiddle.net/Mk692/5/
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.