I'm trying to make floating panel with
var self = this;
this.$widget = (function() {
var $panel = $("#tmpl-float-panel").tmpl({
title : title
});
//close on click on cross
$panel.find(".ui-dialog-titlebar-close").click(function() {
self.hide();
});
$panel.draggable({
containment : "parent",
handle : "div.ui-dialog-titlebar",
opacity : 0.75
}).appendTo($container);
return $panel;
})();
later I insert content with
this.$widget.find(".ui-dialog-content").append($content);
And here's jquery template used to build panel:
<script id="tmpl-float-panel" type="text/x-jquery-tmpl">
<div class="ui-widget ui-dialog ui-corner-all ui-widget-content float-panel no-select">
<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
<span class="ui-dialog-title">${title}</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon"></span>
</a>
</div>
<div class="ui-dialog-content ui-widget-content">
</div>
</div>
</script>
Here's the question. When I'm trying to drag the panel (clicking on title bar and moving mouse), the whole widget disappears. Can someone tell me why?
UPD: on chrome it do not disappear on click, but somewhy it takes all possible width.
here's html wrapping floating panel:
<div id="idA">
<div id="idB">
<!-- here I have panels and other divs -->
</div>
</div>
in CSS I have
#idA {
height: auto !important;
min-height: 100%;
}
#idB {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
In lack of a jsfiddle I've created one, based on the code that you've provided.
Within the jsfiddle, the panel works as expected in all browsers that I've tested with (including FF, Safari, Chrome, Opera).
I think your issue might be related to the fact that you haven't properly defined the jqueryui dialog close button in your jQuery template and a click on the title bar may have been misinterpreted as a click event on ".ui-dialog-titlebar-close".
In my jsfiddle I've defined:
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon ui-icon-close"></span>
</a>
which might make the difference.
Here is the link to the jsfiddle.
Try appending first then calling draggable and resizable:
$panel.appendTo($container).resizable().draggable();
I had that once and the problem was that a parent div had the css property position: absolute. The effect was that the item was put on the bottom right screen corner the moment I started to drag it around. So first you thought it had disappeared but if you dragged it towards top-left it would come up.
I solved the problem by adding display: inline-block to float panel
<script id="tmpl-float-panel" type="text/x-jquery-tmpl">
<div style="display: inline-block" class="ui-widget ui-dialog ui-corner-all ui-widget-content float-panel no-select">
<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
<span class="ui-dialog-title">${title}</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon"></span>
</a>
</div>
<div class="ui-dialog-content ui-widget-content">
</div>
</div>
</script>
Any ideas of more elegant solution?
Related
First of all, the tooltip is working for all the direction, top, bottom and left. But for the right is not working.
So I think that maybe is a problem with the CSS or HTML structure. (But the tooltip is in a position absolute, so I don't know why is this happening. )
HTML
<li class="">
<div class="hover-highlight ml-2">
<a class="" href="#">
<i data-toggle="tooltip" title="Dashboard" class="icon-meter"></i>
<span>Dasboard</span>
</a>
</div>
</li>
In the javascript I am doing this:
$(function () {
$('[data-toggle="tooltip"]').tooltip({
placement: 'right'
});
});
Like I said, for any other placement it is working fine. But for the right it broke!
In fact, I don't know why, but it is rendering with the left properties:
<div class="tooltip fade show bs-tooltip-left" role="tooltip" id="tooltip558151" style="position: absolute; transform: translate3d(125px, 207px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="left">
<div class="arrow" style="top: 8px;" />
<div class="tooltip-inner">Dashboard</div>
</div>
The problem
Okay, I found the problem. looks like automatically bootstrap push your text according to the parent div. For example, if your tooltip is at the right of the window, you can't force it to be placed into the right.
I don't know how to fix this behaviour.
CODE
Please, check the code here:
the problem is the margins of div, take a look:
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]',placement: 'top' });
});
.theproblem {
margin-left:140px;
margin-top:140px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div data-toggle="tooltip" title="Gestión de Usuarios" class="theproblem">
Hola mundo
</div>
</div>
</div>
also Fiddle
I struggled with the differences between bootstrap4 using "data-toggle" and "data-placement" and bootstrap5 using "data-bs-toggle" and "data-bs-placement".
https://getbootstrap.com/docs/4.0/components/tooltips/
https://getbootstrap.com/docs/5.0/components/tooltips/
Best solution:
$('[data-toggle="tooltip"]').each(function() {
$(this).data('bs.tooltip').config.placement = 'right';// For dynamic position
$(this).data('bs.tooltip').config.boundary= 'right'; // Used for tooltip boundary range
});
In the event this helps anyone arriving here in future, the fix for a similar issue I encountered was setting the boundary to "window" which prevents the tooltip from being constrained to within it's parent. See https://getbootstrap.com/docs/4.0/components/tooltips/#options for additional options.
<button title="tooltip text" data-toggle="tooltip" data-placement="right" data-boundary="window">
I believe you should put the placement in a data property of the element:
<button data-toggle="tooltip" data-placement="left"> tooltip </button>
You should put the text in a data property of the element
$(function () {
$('[data-toggle="tooltip"]').tooltip({
placement: 'right'
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<li class="">
<div class="hover-highlight ml-2">
<a class="" href="#">
<i data-toggle="tooltip" title="Dashboard" class="icon-meter">
<span>Dasboard</span>
</i>
</a>
</div>
</li>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
I had the same problem and it was because the parent div's overflow was set to auto.
So I changed it from overflow: auto to: overflow: visible and that fixed the problem.
I have five buttons on one image. Every time you hover over each button, I would like the background image to change according to each button you hover. I tried doing this using CSS, but this doesn't seem to be very effective when applying the "hover" effect. It only works if you hover over the background itself and it will change, but not when you hover over a button.
And if I tried applying the CSS "hover" effect by adding a class in the li section and a sort of image sprite just under the primary background image, the image would only appear within the li itself and not as a background cover.
I figured jQuery/javascript would be better. But, I'm not sure how to apply what I would like. I tried to do a hover action with javascript, but I'm not sure why it isn't working. The following code is snippet from the main code on JSFiddle. Does anyone have suggestions?
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
$('#primary').append($(this));
});
$('#screenprinting').hover(function() {
$('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
}, function() {
$('#primary').css('background', '');
});
});
#mma #primary.hp {
background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
background-position: 43% top
}
<div id="mma" data-trackingposition="mma">
<div id="primary" class="hp clearfix" data-speed="6" data-type="background">
<div class="bucket">
<p style="color:white;">Insure the things you love most...</p>
<p class="title" style="color:white">Select a policy to get a quote</p>
<span id="productheader" role="heading">asdf</span>
<ul class="iconlist">
<li class="attached check" data-prod="au">
<span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>
</li>
<li class="attached property" data-prod="ho">
<span><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </span>
<span class="icon close"></span>
</li>
</ul>
</div>
</div>
</div>
You need to import jQuery library to make things work in jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
$('#primary').append($(this));
});
$('#screenprinting').hover(function() {
$('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
}, function() {
$('#primary').css('background', '');
});
});
#mma #primary.hp {
background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
background-position: 43% top
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mma" data-trackingposition="mma">
<div id="primary" class="hp clearfix" data-speed="6" data-type="background">
<div class="bucket">
<p style="color:white;">Insure the things you love most...</p>
<p class="title" style="color:white">Select a policy to get a quote</p>
<span id="productheader" role="heading">asdf</span>
<ul class="iconlist">
<li class="attached check" data-prod="au">
<span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>
</li>
<li class="attached property" data-prod="ho">
<span><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </span>
<span class="icon close"></span>
</li>
</ul>
</div>
</div>
</div>
i have the following div Container (including a background image).
<div class="haus"></div>
how can i link this DIV to an url?
use the <a> tag :
<a href="">
<div class="haus"></div>
</a>
Pretty Easy , like this :
<a href="htps://www.google.com">
<div class="haus">
This is div
</div>
</a>
Working fiddle : http://jsfiddle.net/xhGud/4/
Use this if you want to keep the next element in the same line
<a href="htps://www.google.com">
<div class="haus" style='display:inline-block'>
text
</div>
</a>
or just
<a href="htps://www.google.com">
<div class="haus">
text
</div>
</a>
This is also fine withe some JS work
<div onClick="self.location.href='http://www.google.com'" class="haus"></div>
Surround the div with the a-link tag
<a href="#">
<div class="haus"></div>
</a>
Or you can use onClick
<div onClick="self.location.href='http://www.google.de'" class="haus"></div>
Or a "experimental" way is to add the div a <a> link and call it over jQuery:
<div class="haus">
link
</div>
jQuery Script:
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
I would do it the other way around. by making the a to take all the div space. Live Fiddle
That way, it will validate under any doctype.
personally I think it's clearer that way. but, its debatable.
HTML:
<div class="haus">
This is link in the div
</div>
CSS:
.haus
{
background-color: azure;
height: 50px;
}
.haus a
{
display: inline-block;
width: 100%;
height: 100%;
}
I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?
I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});
If something's not clear, please let me know.
I think you should add position:absolute; to "slider", and set its position.
You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.
You need an absolute position for z-index to work.
I am using JCarouselLite to produce three scroll boxes on a website. 2 of the carousels line up properly (New, Gifts), but a third does not (BestSellers).
The image floats to the left because the plugin keeps calculating the width incorrectly. All three have the same underlying HTML code, but I can't get the BestSeller Carousel to line up properly.
I also tried to run it on window.load. and have init running in the footer.
What am I missing?
Update:
Here's the Code that initalizes the Carousel:
jQuery(document).ready(function($){
$(".rotateNewContent").jCarouselLite({
btnNext: ".next", btnPrev: ".prev",
speed: 800, visible: 1
});
$(".rotateBestsellerContent").jCarouselLite({
btnNext: ".nextBest", btnPrev:
".prevBest", speed: 800, visible: 1
});
$(".rotateGiftContent").jCarouselLite({
btnNext: ".nextGift", btnPrev:
".prevGift", speed: 800, visible: 1
});
});
here is the html of the first and second lists.
<button class="prev"></button>
<div class="rotateWrapper"><div class="rotateNewContent">
<ul class="NewProductList">
<li class="Odd">
<div class="ProductImage">
<a href="#" ><img src="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>
Organic Maple Syrup from Mount Cabot
</strong>
</div>
<div class="ProductPriceRating">
<em>$13.00</em>
</div>
</li>
<li class="Even">
<div class="ProductImage">
<a href="#" ><img src="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>
<a href="#">Sicilian Marmalades from Marchesi di San
Giuliano</a>
</strong>
</div>
<div class="ProductPriceRating">
<em>$15.00</em>
</div>
</li>
</ul>
</div></div><button class="next"></button>
<button class="prevBest"></button>
<div class="rotateWrapper"><div class="rotateBestsellerContent">
<ul class="NewProductList">
<li>
<div class="ProductImage"><a href="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>Farro from Rustichella d'Abruzzo</strong>
<em>$8.75</em>
</div>
</li>
<li>
<div class="ProductImage">
<a href="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>Mariage Frères Marco Polo</strong>
<em>$22.00</em>
</div>
</li>
</ul>
NB: This site is not yet live, please do not shop.
The middle instance has a width of 135px, while the left and right instances have a width of 180px.
Left Content:
<div class="rotateNewContent" style="overflow: hidden; visibility: visible; position:
relative; z-index: 2; left: 0px; width: 180px;">
Middle Content:
<div class="rotateBestsellerContent" style="overflow: hidden; visibility: visible;
position: relative; z-index: 2; left: 0px; width: 135px;">
I used Firebug to diagnose the CSS issues.
i narrowed it down to the product names. i believe it has something to do with the foreign characters in the names. when i take those products out, the layout resolves correctly.
--now i have to figure out how to fix that. :-)
the problem was that there were two divs within the li element. i wrapped both within another div and gave it a set width and height. now the plugin uses that div to calculate its size.
thanks for helping me think this through george!