Is there a way to display a title box without creating a html element with title="something" attribute and moving the mouse over it?
Something like: document.tooltip = "Google";
that would display http://puu.sh/67Fub.jpg without having to move the mouse over the Google image nor needing the image in the first place.
You could do something with CSS, using the :before or :after psuedo-elements (jsfiddle):
<div>Hello world</div>
div {
position: relative;
}
div:hover:after {
content: 'foo bar';
position: absolute;
background: cornsilk;
padding: 10px;
border: 1px solid #222;
box-shadow: 1px 1px 1px 1px #222;
}
To take it a step further, you can do it dynamically like this (just an example):
var text = $('input').val();
$('div').attr('data-content',text);
div:hover:after {
content: attr(data-content);
/*plus all the other stuff*/
}
try this:
<div id="container">
<div style="width:140px;">
<h1 id="text">GOOGLE</h1>
</div>
</div>
js:
var tile = $('<div />').appendTo('#container');
tile.attr('id','tile');
tile.text('google');
tile.css({
'background-color':'cornsilk',
width:'50px',
height:'20px',
'position': 'absolute',
'display': 'none',
'box-shadow': '1px 1px 1px 1px #222',
});
$('#text').on('mouseover',function(e){
tile.show();
tile.css({
'left': e.pageX + 'px',
'top': e.pageY + 'px'
});
});
$('#text').on('mouseout',function(e){
tile.hide();
});
Related
is there any way to get the dragged item position in the dragover/dragenter/dragleave events in terms of X and Y related to the page? i know i can get the mouse position by calling event.clientX or event.clientY, but i would like to know the position of the floating element that created by the drag (the one that can be set by event.dataTransfer.setDragImage() function)
for example this code will print the mouse location when dragging, and not the real offset of the floating element:
function dragOver(event) {
console.log(event.clientX
});
With help of jQuery library you can achieve it,You can use console to print values, just to show you I'm printing positions on screen.
$('#dragMe').draggable(
{
containment: $('body'),
drag: function(){
var position = $(this).position();
var xPos = position.left;
var yPos = position.top;
$('#positionX').text('positionX: ' + xPos);
$('#positionY').text('positionY: ' + yPos);
},
accept: '#dragMe',
over : function(){
$(this).animate({'border-width' : '5px',
'border-color' : '#0f0'
}, 500);
$('#dragThis').draggable('option','containment',$(this));
}
});
#dragMe {
width: 10em;
height: 6em;
padding: 0.5em;
border: 4px solid #ccc;
border-radius: 0 2em 2em 2em;
background-color: #fff;
background-color: rgba(255,255,255,0.5);
}
#dropMe {
width: 12em;
height: 12em;
padding: 0.5em;
margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dragMe">
<p>DRAG ME</p>
<ul>
<li id="positionX"></li>
<li id="positionY"></li>
</ul>
</div>
<div id="dropMe"></div>
I have resizable DIV with text. I operate only on width, the height should auto size but not smaller than text (content). How to do it?
My code:
HTML:
<div id="block">
sadfasda asfasfasf asfafafaf a a a fasfas fasfafasfaf
asffasdf as fasfasfa sfasfafasfaf akflj jalj faldjfajf'a
klasdjf lka;sjfajf ljasfljaflkj f jf f jfaj flajklfjalfj
klasjf f lkajfajf lajf lajf al alfjasl jall fafasff
</div>
CSS:
#block {border: 1px solid red; width: 300px; height: auto; padding: 5px}
JS:
$("#block").resizable({
maxWidth: 500,
minWidth: 115
});
Here the DEMO
A solution could be to use a containment container like this. This will keep that container of yours in control :)
EDIT:
ohno.. it doesn't work when you make it smaller.. let me see
EDIT2:
now it does!
jsFiddle
HTML
<div id="block">
<div class="content">
sadfasda asfasfasf asfafafaf a a a fasfas fasfafasfaf
asffasdf as fasfasfa sfasfafasfaf akflj jalj faldjfajf'a
klasdjf lka;sjfajf ljasfljaflkj f jf f jfaj flajklfjalfj
klasjf f lkajfajf lajf lajf al alfjasl jall fafasff
</div>
</div>
JS
var block = $("#block");
block.resizable({
maxWidth: 500,
minWidth: 115,
resize : function(e) {
block.height(block.find('.content').height())
}
});
CSS
#block {
border: 1px solid red;
width: 300px;
height: auto;
padding: 5px
}
How can i add div every time when height of page becomes greater than 11.5in? I need to copy same div every time that happens.
<div class="logo-etm">
<img src="/img/etm-logo.png" class="etm">
</div>
I have this code,but it wont work like i want it to:
$( document ).ready( function(){
var e = $( '.logo-etm' );
if( $("body").height() > 11.5 ){
e.clone().insertAfter( e );
}
});
it puts all divs one across the other... i need them below. Can someone help?
and this is css:
$('.logo-etm').css('display','block').css('margin-top','-1.5in').css('width','100%');
$('.etm').css('position','fixed').css('z-index','-1').css('width','30%');
Your css is not css is JS so you have to apply it to the new cloned node !
Try to apply it after node cloning !
$(document).ready(function() {
var e = $('.logo-etm');
if($("body").height() > 11.5){
e.clone().insertAfter(e);
}
$('button').click(function(){
// $('.logo-etm').css('display','block').css('margin-top','-1.5in').css('width','100%');
// $('.etm').css('position','fixed').css('z-index','-1').css('width','30%');
$('.logo-etm').css({
'display' :'block' ,
'margin-top' :'1100px' ,
'width' :'100%'
});
$('.etm').css({
'position' :'realtive' ,
'z-index' :'-1' ,
'width' :'30%'
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-etm">
<img src="https://openclipart.org/image/100px/svg_to_png/220732/Tribal-Kitten.png&disposition=attachment" alt="Tribal Kitten" title="Tribal Kitten by GDJ ( https://openclipart.org/user-detail/GDJ )" class="etm"/>
</div>
<button>click to apply css</button>
11.5 in is not a unit jQuery can work with. $('body').height() returns a unitless value based on pixels, as is stated in the documentation of the height() method. May I ask why you opted to using inches?
Would swapping the inches for its equivalent in pixels be an option? The element is properly inserted if so, see the attached example. If the body height is bigger than 500 px the element will be cloned and inserted after the first element.
To make sure that the body's (viewport) height is returned properly in this case, I have given the html and body tags height: 100%.
$(document).ready(function() {
// What is the original logo?
var logo = $('.logo');
// Where should the duplicated logo go to?
var target = $('.body');
// What should the min-height be before inserting the duplicated logo?
if ($("body").height() > 50) {
logo.clone().css({
'position': 'fixed',
'background': 'red',
'z-index': '-1',
'width': '75px',
'top': '0px',
'left': '0px',
}).insertAfter(logo);
logo.css({
'margin-top': '1100px',
'display': 'block'
});
}
});
html,
body {
margin: 0;
padding: 0;
}
body {
font: bold 2em sans-serif;
color: #fff;
border: 1px solid #000;
}
.logo {
position: relative;
background: #7A59A5;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">elem</div>
Update
The following code will copy and insert the copied logo every amount of pixels defined in var size
$(document).ready(function() {
// What is the original logo?
var logo = $('.logo');
// At what size should a new logo be inserted?
var size = 1100;
if($('body').height() > size) {
for(var i = (size * 2); i < ($('body').height()); i += size) {
logo.clone().css({
'position': 'absolute',
'background': 'red',
'z-index': '-1',
'width': '100px',
'top': i + 'px'
}).insertAfter(logo);
}
logo.css({
'margin-top': '1100px',
'display': 'block'
});
}
});
html,
body {
margin: 0;
padding: 0;
}
body {
font: bold 2em sans-serif;
color: #fff;
height: 6000px;
}
.logo {
position: relative;
background: #7A59A5;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">logo</div>
I am new to JQuery and am trying to add a pop-up box to my page.
I'm using the following jQuery plugin (adopted from Ray Stone's leanModal):
(function($) {
$.fn.extend({
leanModal: function(options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null
};
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function() {
var o = options;
$(this).click(function(e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function() {
close_modal(modal_id)
});
$(o.closeButton).click(function() {
close_modal(modal_id)
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$("#lean_overlay").css({
"display": "block",
opacity: 0
});
$("#lean_overlay").fadeTo(200, o.overlay);
$(modal_id).css({
"display": "block",
"position": "fixed",
"opacity": 0,
"z-index": 11000,
"left": 50 + "%",
"margin-left": -(modal_width / 2) + "px",
"top": o.top + "px"
});
$(modal_id).fadeTo(200, 1);
e.preventDefault()
})
});
function close_modal(modal_id) {
$("#lean_overlay").fadeOut(200);
$(modal_id).css({
"display": "none"
})
}
}
})
})(jQuery);
My CSS looks like this:
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
#signup {
width: 404px;
padding-bottom: 2px;
display:none;
background: red;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
My initialization script looks like this:
<script type="text/javascript">
$(function() {
$("#signup").leanModal();
});
</script>
And, finally, this is the HTML that I'm using:
<p id="examples" class="section box">
<strong>Example:</strong>
<a id="go" rel="leanModal" name="signup" href="#signup">With Close Button</a>
</p>
<div id="signup">
<div id="signup-ct">
<div id="signup-header">
<h2>This is a test</h2>
<p>testing.</p>
<a class="modal_close" href="#"></a>
</div>
</div>
</div>
With this code, the pop-up isn't coming up & I have a feeling that there must be a very simple fix for this, but I'm breaking my brain trying to figure it out. Any help you can give would be greatly appreciated!
I understand others are suggesting to use the existing library (highly recommended). But, if you want to solve the problem with your specific code, here's what I think you're doing wrong:
You're hooking into the wrong element with your 'leanmodal' call.
I've created a jsFiddle that pops up the dialog you want when the link is clicked. You can access it here:
http://jsfiddle.net/eWUgE/
Basically, I've modified the following line:
$("#signup").leanModal();
to become:
$('#go').click(function() {
$(this).leanModal();
});
definitely one of the best solutions is to use the jquery UI. You can only download the modal plugin if you do not need the entire library.
Chears
Why doesn't my tooltip work with my css in here? http://jsfiddle.net/BG4Sn/
Please see the jsfiddle, the problem is, that with my css included, the tooltip won't show up true box tooltip after mouse enter on links tooltip1 & tooltip2 & tooltip3 . When I remove the link to my css in the html head, it works true.
function tool_tip() {
//var tip = $('.tool_tip').closest('li').find('div').clone();
$('.tool_tip').mouseenter(function () {
var $this = $(this),
$div = $this.closest('li').find('div');
$(this).attr('title', '');
$div.fadeTo(300, 0.9);
}).mousemove(function (e) {
$('.tooltip').css('bottom', e.pageY + -10);
$('.tooltip').css('left', e.pageX + 10);
}).mouseleave(function () {
$('.tooltip').hide();
})
}
tool_tip();
The CSS being applied to .tooltip in your style_s.css is different from your JSFiddle. Copy and paste this .tooltip style into style_s.css:
.tooltip {
background-color: #E5F4FE;
display: none;
padding: 5px 10px;
background-color: #E5F4FE;
border: #5A5959 1px solid;
position: fixed;
z-index: 9999;
color: #0C0C0C;
font-size: 0.688em;
}
Then linking to style_s.css will produce the same style.