I want to create 4 div elements by clicking on button.
Please see, this fiddle for my current implementation.
In this current view the new element added to the bottom of each other.
My problem is that I don't know how to put them side by side.
I want to have 4 div elements (two at the top and two at the bottom, square shape)
Thats part of my code:
var box = document.getElementById('box'),
template = box.getElementsByTagName('div'),
template = template[0];
submit1.onclick = function () {
var new_field = template.cloneNode(true);
box.appendChild(new_field);
return false;
};
How can I do this?
It is because div's default display is block so you need to add
display:inline-block;// add this to your div style
Css
div { margin:1em;display:inline-block; }
Demo
you can use float:left as well as display:inline-block to your div.
div { margin:1em;float:left; }
OR
div { margin:1em;display:inline-block; }
You can try this using CSS
div { float :left }
You can give dynamic id to each div so it doesnt effect to other div.
here's your demo
Fiddle
Related
after a little advice. I'm working on my portfolio and I'm using a css transition to animate an element with some contact information which becomes active when the user scrolls up.
Within this element there is a figure class element called '.top-bar-avatar' which I have added a tool-tip and bounce animation too. This is all working but what I would like to achieve is for the tool-tip to automatically display and animation to fire when the figure is displayed within the web browser.
HTML
<li><figure class="top-bar-avatar"><img src="img/nick_avatar.png" alt="Top Bar Avatar Image Of Nick" title="Find Out More About Me" data-toggle="tooltip" data-placement="bottom"></figure></li>
JS
$('[data-toggle="tooltip"]').tooltip();
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward code here
$('.top-bar').addClass('top-bar-animate');
}else{
//downward - code here
$('.top-bar').removeClass('top-bar-animate');
}
lastScrollPosition = newScrollPosition;
}
Tried a few different ways of doing this with yet to succeed. Any advice would be appreciated. Cheers in advance
I seem to have resolved this myself, i simply added and removed the display attribute and modified it's value within my existing code, see below.
Oh I also added a div id called 'profile-pic' to the image element, rather than focus on the figure class it's contained within.
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward code here
$('.top-bar').addClass('top-bar-animate');
// display tool-tip when top-bar animates in
$('#profile-pic').tooltip('show');
}else{
//downward - code here
$('.top-bar').removeClass('top-bar-animate');
// hide tool-tip when top-bar animates out
$('#profile-pic').tooltip('hide');
}
lastScrollPosition = newScrollPosition;
}
In this sample app I have a header , footer and the content div contains a table which holds various stats of some basketball players.
I was having a problem with the footer when i have a lot of entries in the table. What ends up happening is that the footer will block the other entries as displayed in the picture below.
Then when i click in the middle the footer disappears as shown in picture below.
I was wondering if there is generic way where i can check to see if there are a lot of entries then dont show the footer at all? or is there some way around this problem? Please advice i am new to web dev and dont know much css tricks.
Here is the FIDDLE.
This is roughly what i want to achieve, however i am not sure if its the best solution so i am open to all suggestions.
if table contains > x entries
{
hide footer
} else {
show footer
}
I think the best solution for you is to remove the data-position="fixed" on the footer as suggested by others, but then also add some javascript that sets the min-height of the content div according to device height. That way for a small number of rows in the table, the footer still appears at the bottom of the screen. As the number of rows increases beyond the device height, the footer just gets pushed down remaining below the table.
Below, the SetMinHeight function calculates the minimum height for the content div that would fill the given device height. Then you call it on pagecontainershow and whenever the window resizes or the orientation changes:
$(document).on("pagecontainershow", function () {
SetMinHeight();
});
$(window).on("resize orientationchange", function () {
SetMinHeight();
});
function SetMinHeight() {
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").css("min-height", content + "px");
}
Updated FIDDLE
NOTE: for the calc to work, I had to remove the CSS zoom: #tbcontent{zoom:80%;}. If you really need the zoom, you may have to adjust the min-height calculation...
The footer shouldn't be fixed:
http://jsfiddle.net/fmpeyton/L2vQ3/
Remove data-position='fixed' from this line:
Well, you can check the number of rows in that table with something like this:
var rowCount = $('#myTable tr').length;
Then add a condition such as if rowCount > 5, you can add a hidden class to the footer.
A hidden class can be something like this:
.hidden { display: none; }
So basically,
if(rowCount > x) { $('.footer').addClass('hidden'); }
try this:
$(document).ready(function(){
var tablerow = $("table tr").length-1;
if(tablerow>20)
{
$(".ui-title").hide();
}
else
{
$(".ui-title").show();
}
});
Let consider fallowing scenario
<p>jhony</p>
<p>ram</p>
<p>lilly</p>
<div id="about"></div>
<script>
$(function() {
$('p').hover(function() {
$('#about').show();
}, function() {
$('#about').hide();
});
});
Know on mouse hover on the p tag a div will showed,But it is taking always a fixed/absolute position,But I want to show it with respect to hovering element.
Example:
If I place mouse on 'jhony' then about div should be shown left to it,
If I place mouse on 'ram' then about div should be shown left to it,
If I place mouse on 'lilly' then about div should be shown left to it.
Finally it should work like jQuery Tooltip.
Why u use jQuery for it? U can use only css
p:hover span{display : block}
or if you want use jQuery/js you must calculate height from top of window to your p and set it for your div:
$(function() {
$('p').hover(function() { $('#about').css('top',this.offset().top
)}
The result in jsfiddle may not work, but it does in my documents.
http://jsfiddle.net/hXzrA/
What is working is that my text is hidden, and when I click on Read More..., it reveals more of the text in the paragraph. If I click on Read More... again it collapses the text in the paragraph back to the normal state.
What I having been trying to figure out is:
a mouse over the Read More.... link. Kinda like a Blue color highlight so that people know it's mouseover.
When the text is revealed, Read More... text should disappear and at the bottom of the now revealed text, should be Collapse text... (same blue highlight on mouseover). The Collapse should restore the text back to it's collapse state.
How do I achieve this in:
$(document).ready(function(){
var open = false;
$('.reveal').click(function() {
if (open) {
$(this).animate({height:'20px'});
}
else {
$(this).animate({height:'100%'});
}
open = !open;
});
});
Also, if you are able to get the text to implode/explode on reveal/hide, that would be so great too. I have been trying and trying, but couldn't get it to do that.
Take a look how simplified it could be at this fiddle: http://jsfiddle.net/syEM3/
Javascript:
$('.reveal').click(function() {
$(this).next().slideToggle();
});
EDIT:
For the effect of reveal / collapse:
$('.reveal').click(function() {
$(this).slideUp(100).next().slideToggle();
$(".collapse").slideDown(100);
});
$('.collapse').click(function() {
$(this).slideUp(100).prev().slideToggle();
$(".reveal").slideDown(100);
});
You can not animate to 100%, you need to calculate element's original height first than manipulate the height.
Here is working jsFiddle.
var orgHeight = parseInt($('.reveal').css('height'));
$('.reveal').css('height','20px');
$('.reveal').click(function() {
var target = parseInt($(this).css('height'));
if (target != orgHeight) {
$(this).animate({'height':orgHeight+'px'},500);
}else{
$(this).animate({'height':'20px'},500);
}
});
For hover effect, just use CSS:
.readmore:hover, .readless:hover {
text-shadow: 2px 2px 3px blue;
}
As for the separate links, I think it's easier just to put them in your markup:
<a class="readmore">Click Here to READ MORE...</a>
TEXT TEXT TEXT
<a class="readless">Collapse Text...</a>
Then just .show/.hide .readmore/.readless as appropriate based on open.
http://jsfiddle.net/ExplosionPIlls/hXzrA/4/
stick a :hover on your selector and then put the rule for the hover. That should be in your css, not the jquery function.
wrap a span around your "Read More" text with a class and in the jquery, on the click function above you can do something like:
$('spanClass').hide();
and just the opposite:
$('spanClass').show();
I am writing a validator for "visual correctness" of html files. The goal is to detect too wide elements.
Here is a demo of my problem.
The dotted red line is an indicator of the max width of the document (200px in this example). The first paragraph is fine, but the second is too wide. Nevertheless, all of the following commands still return "200px" as the width:
// all return 200, but the value should be larger
$('#two').width();
$('#two').outerWidth();
$('#two').prop('clientWidth');
Please see the Fiddle for more details.
How can i detect such oversized elements?
Updated question: Better to ask, how can i detect text that exceeds the borders of their parent elements?
Updated requirement: I am not allowed to change anything in the source HTML or CSS. But i can do anything i want with jQuery to modify the document, so that i can detect those too wide elements.
As others have said, temporarily wrap the text node in an inline element.
var two = document.getElementById('two'),
text = two.firstChild,
wrapper = document.createElement('span');
// wrap it up
wrapper.appendChild(text);
two.appendChild(wrapper);
// better than bad, it's good.
console.log(wrapper.offsetWidth);
// put it back the way it was.
two.removeChild(wrapper);
two.appendChild(text);
http://jsfiddle.net/vv68y/12/
Here is a getInnerWidth function that should be useful to you. Pass it an element and it will handle the wrapping and unwrapping.
function getInnerWidth(element) {
var wrapper = document.createElement('span'),
result;
while (element.firstChild) {
wrapper.appendChild(element.firstChild);
}
element.appendChild(wrapper);
result = wrapper.offsetWidth;
element.removeChild(wrapper);
while (wrapper.firstChild) {
element.appendChild(wrapper.firstChild);
}
return result;
}
http://jsfiddle.net/vv68y/13/
scrollWidth will do it:
$("#two").get()[0].scrollWidth
or
getElementById("two").scrollWidth
this outputs 212px, the real width you are looking for.
This effect is called "shrinkwrapping", and there's a couple of ways to determine the "real" width of the element.
Float
One of the ways that you can use is to float your <p> element which will force it as small as possible, but you'll need to use a clearfix if anything inside your div is floating:
#two { float: left; }
Inline-block element
Inserting an inline element should work.
<p>content</p>
would become
<p><span>content</span></p>
Absolutely positioned element
Changing the element position to be absolute should also work:
#two { position: absolute; }
If you can't statically change the markup or the style, you can always change them dynamically through JavaScript.
(absolutely positioned element)
var realWidth = $("#two").css("position", "absolute").width();
(float)
var realWidth = $("#two").css("float", "left").width();
(inline-block element)
var t = $("#two").html();
var realWidth = $("#two")
.empty()
.append($("<span>").html(t))
.width();
Apply word-wrap: break-word; to it.. so the word will break and there won't be any text going out of the container... btw you can't check the width of the text which is going out of the container.
Example
Update: You can check if the width of text in it is bigger than the width of the container like this
As others have pointed out, changing the position of the element to absolute also works.
Doing this will result in an inline-style which can mess with your css afterwards if you don't watch out. Here is a solution to get rid of the inline style again.
//Change position to absolute
$('#two').css("position", "absolute");
var textWidth = $('#two').width();
//Get rid of the inline style again
$('#two').removeStyle("position");
//Plugin format
(function ($) {
$.fn.removeStyle = function (style) {
var search = new RegExp(style + '[^;]+;?', 'g');
return this.each(function () {
$(this).attr('style', function (i, style) {
return style.replace(search, '');
});
});
};
}(jQuery));
The element itself is constrained to 200px, but the text inside spills out. If you insert a span (or any other inline element) inside the P tag it works fine.
http://jsfiddle.net/will/vv68y/5/
Hope that helps :)