I have two divs. When the resolution is large enough, both divs are shown next to each other. But when the resolution is too small it only shows one of the divs, but I can toggle between them with two buttons appearing at this resolution.
So my HTML is just like this:
<div id="buttons">
<p>LEFT</p>
<p>RIGHT</p>
</div>
<div id="left"> CONTENT </div>
<div id="right"> CONTENT </div>
The JavaScript used for the toggle is just:
<script>
$(function() {
$('#buttons> p').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
});
</script>
Basically everything works fine. When the resolution is too small, the buttons pop up, and it is divided into one div at a time, and when the resolution is large enough they are next to each other.
However, if I change the width of my browser window, and toggle between the two divs, and then go back, one of the divs still has display: none resulting in it not showing when there has been toggled.
I know one might argue that people don't change resolutions on phones, and therefore this shouldn't be a problem. But somehow it annoys me a lot. So I was wondering if there was some way to tell it, that if above a certain resolution, BOTH divs should have the display: none or inline style removed.
You could add a resize listener to show both elements if the size is sufficiently high:
$('#buttons> p').click(function() {
var ix = $(this).index();
$('#left').toggle(ix === 0);
$('#right').toggle(ix === 1);
});
$(window).resize(function() {
if (Number($(window).width()) > 600) $('#left, #right').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
<p>LEFT</p>
<p>RIGHT</p>
</div>
<div id="left"> CONTENT1 </div>
<div id="right"> CONTENT2 </div>
use media queries for setting different css based on screen size. PFb sample. you can also add display style as css as None or Block based on screen width.
body {
background-color: red;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
<div class="grid_1_of_4 images_1_of_4">
<img src="images/Advertise2.png" alt="" />
<h2>**This is a Long text**</h2>
<div class="price-details">
<div class="price-number">
<p><span class="rupees">Price</span></p>
</div>
<div class="clear"></div>
</div>
</div>
I want to make this h2 text Marquee when text overflows. How should I do it?
Thank You!
Here is a similar issue:
How to make marquee text only when it's overflowing?
You should try the solution mentioned in the link above. Hope this is helpful. In your case I just gave your h2 tag an id and copied the solution from the link I've posted.
function isElementOverflowing(element) {
var overflowX = element.offsetWidth < element.scrollWidth,
overflowY = element.offsetHeight < element.scrollHeight;
return (overflowX || overflowY);
}
function wrapContentsInMarquee(element) {
var marquee = document.createElement('marquee'),
contents = element.innerText;
marquee.innerText = contents;
element.innerHTML = '';
element.appendChild(marquee);
}
var element = document.getElementById('overflow');
if (isElementOverflowing(element)) {
wrapContentsInMarquee(element);
}
#overflow {
white-space: nowrap;
max-width: 15em;
overflow: hidden;
}
<div class="grid_1_of_4 images_1_of_4">
<img src="images/Advertise2.png" alt="" />
<h2 id="overflow">**This is a Long text which should marquee when overflow**</h2>
<div class="price-details">
<div class="price-number">
<p><span class="rupees">Price</span></p>
</div>
<div class="clear"></div>
</div>
</div>
That tag is obsolete and you should not use it.
Look at MDN for refrerence.
To detect overflow you could test element.scrollWidth > element.clientWidth given that the width of the element is set, or you compare it with its parent.
Instead of the marquee element you could try to do a CSS animation on the content transforming translateX to make it bounce left and right.
Example code at JSBin
I have tried vTicker but it does not work as an inline element.
<h1>
<div id="vticker"><ul>...</ul></div>
Some other headline text
</h1>
I would like the vertically scrolling text inside the vTicker object to align with the other content in the h1 tag, but when I try to make it inline or inline-block it disappears.
I tried making my own as well, but can't seem to move elements located inside an inline or inline-block object with absolute, relative, or margin positioning.
Just setting the element you run vTicker on to be display: inline won't work, because vTicker uses absolute positioning and overflow: hidden to do its magic.
Using display: inline-block comes closer, but suffers from the fact that the vTicker container does not have a width. Thus, it won't display anything.
We can fix this by setting the width of the vTicker container to the width of the widest element in it, or, equivalently, the width of the ul in the vTicker container. Demo:
/*! vTicker 1.21 http://richhollis.github.com/vticker/ | http://richhollis.github.com/vticker/license/ | based on Jubgits vTicker http://www.jugbit.com/jquery-vticker-vertical-news-ticker/ */
(function(d){var g,c,f;g={speed:700,pause:4E3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1,autoAppend:!0};c={moveUp:function(a,b){return c.showNextItem(a,b,"up")},moveDown:function(a,b){return c.showNextItem(a,b,"down")},nextItemState:function(a,b){var e,c;c=a.element.children("ul");e=a.itemHeight;0<a.options.height&&(e=c.children("li:first").height());e+=a.options.margin+2*a.options.padding;return{height:e,options:a.options,el:a.element,obj:c,selector:"up"===b?
"li:first":"li:last",dir:b}},showNextItem:function(a,b,e){var d;d=c.nextItemState(a,e);d.el.trigger("vticker.beforeTick");e=d.obj.children(d.selector).clone(!0);"down"===d.dir&&d.obj.css("top","-"+d.height+"px").prepend(e);b&&b.animate?a.animating||c.animateNextItem(d,a):c.nonAnimatedNextItem(d);"up"===d.dir&&a.options.autoAppend&&e.appendTo(d.obj);return d.el.trigger("vticker.afterTick")},animateNextItem:function(a,b){b.animating=!0;return a.obj.animate("up"===a.dir?{top:"-="+a.height+"px"}:{top:0},
b.options.speed,function(){d(a.obj).children(a.selector).remove();d(a.obj).css("top","0px");return b.animating=!1})},nonAnimatedNextItem:function(a){a.obj.children(a.selector).remove();return a.obj.css("top","0px")},nextUsePause:function(){var a,b;b=d(this).data("state");a=b.options;if(!b.isPaused&&!c.hasSingleItem(b))return f.next.call(this,{animate:a.animate})},startInterval:function(){var a,b;b=d(this).data("state");a=b.options;return b.intervalId=setInterval(function(a){return function(){return c.nextUsePause.call(a)}}(this),
a.pause)},stopInterval:function(){var a;if(a=d(this).data("state"))return a.intervalId&&clearInterval(a.intervalId),a.intervalId=void 0},restartInterval:function(){c.stopInterval.call(this);return c.startInterval.call(this)},getState:function(a,b){var c;if(!(c=d(b).data("state")))throw Error("vTicker: No state available from "+a);return c},isAnimatingOrSingleItem:function(a){return a.animating||this.hasSingleItem(a)},hasMultipleItems:function(a){return 1<a.itemCount},hasSingleItem:function(a){return!c.hasMultipleItems(a)},
bindMousePausing:function(a){return function(a,e){return a.bind("mouseenter",function(){if(!e.isPaused)return e.pausedByCode=!0,c.stopInterval.call(this),f.pause.call(this,!0)}).bind("mouseleave",function(){if(!e.isPaused||e.pausedByCode)return e.pausedByCode=!1,f.pause.call(this,!1),c.startInterval.call(this)})}}(this),setItemLayout:function(a,b,c){var f;a.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:c.margin,
padding:c.padding});return isNaN(c.height)||0===c.height?(a.children("ul").children("li").each(function(){if(d(this).height()>b.itemHeight)return b.itemHeight=d(this).height()}),a.children("ul").children("li").each(function(){return d(this).height(b.itemHeight)}),f=c.margin+2*c.padding,a.height((b.itemHeight+f)*c.showItems+c.margin)):a.height(c.height)},defaultStateAttribs:function(a,b){return{itemCount:a.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:a,animating:!1,options:b,
isPaused:b.startPaused,pausedByCode:!1}}};f={init:function(a){var b,e;d(this).data("state")&&f.stop.call(this);b=jQuery.extend({},g);a=d.extend(b,a);b=d(this);e=c.defaultStateAttribs(b,a);d(this).data("state",e);c.setItemLayout(b,e,a);a.startPaused||c.startInterval.call(this);if(a.mousePause)return c.bindMousePausing(b,e)},pause:function(a){var b;b=c.getState("pause",this);if(!c.hasMultipleItems(b))return!1;b.isPaused=a;b=b.element;if(a)return d(this).addClass("paused"),b.trigger("vticker.pause");
d(this).removeClass("paused");return b.trigger("vticker.resume")},next:function(a){var b;b=c.getState("next",this);if(c.isAnimatingOrSingleItem(b))return!1;c.restartInterval.call(this);return c.moveUp(b,a)},prev:function(a){var b;b=c.getState("prev",this);if(c.isAnimatingOrSingleItem(b))return!1;c.restartInterval.call(this);return c.moveDown(b,a)},stop:function(){c.getState("stop",this);return c.stopInterval.call(this)},remove:function(){var a;a=c.getState("remove",this);c.stopInterval.call(this);
a=a.element;a.unbind();return a.remove()}};return d.fn.vTicker=function(a){return f[a]?f[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!==typeof a&&a?d.error("Method "+a+" does not exist on jQuery.vTicker"):f.init.apply(this,arguments)}})(jQuery);
{
let vticker = $('#vticker');
vticker.vTicker();
let width = vticker.find('ul').width();
vticker.css({
'display': 'inline-block',
'vertical-align': 'bottom',
'width': width
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
<div id="vticker">
<ul>
<li>Cool</li>
<li>Nice</li>
<li>Awesome</li>
</ul>
</div>
headline
</h1>
I would suggest you to use Flexbox.
h1{
display:flex;
align-items:center;
}
I wanted to use panzoom.js. My image size is larger than container. I needed to make it fit into the container by default view.
<div class="container">
<img id="panzoom" src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" width="900" height="900">
</div>
Here the jsfiddle
http://jsfiddle.net/Vipin/qam85n47/
Please help me to get it.
I have tried with "startTransform" value. But I needed it dynamically.
It should be calculated dynamically.
Image and container size might be changed
Try this:
$(function(){
//get parent width height
var w = $(".container").width();
var h = $(".container").height();
//set parent width height to panzoom element
$("#panzoom").width(w)
$("#panzoom").height(h)
$("#panzoom").panzoom();
});
http://jsfiddle.net/cyril123/vfqdnm8d/2/
You might want to approach it in this way:
<div class="container">
<img width="900" height="900" id="panzoom" src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" />
</div>
.container img {
width: 100% !important;
height: 100% !important;
}
Setting the image width to 100%, dynamic and accounts for changes in image size and container size
https://jsfiddle.net/qam85n47/11/
I have a parent div with a fixed width and a fixed height.
The contents how ever might exceed this, so I am wondering is there a way in Javascript to calculate if the content exceeds the fixed dimensions?
An example would be like this:
<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">
A sentence that exceeds the width!
</div>
In the above case it does exceed the width. How would this be achieved in Javascript?
make a parent for your content:
<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">
<div id="parent">
A sentence that exceeds the width!
</div>
</div>
now you can get width and height of the parent and compare it with your main div:
var h = document.getElementById("parent").offsetHeight;
var w = document.getElementById("parent").offsetWidth;
You can use DOM properties of the div and text nodes. If you can wrap the text in a <span> element, it seems like it will be easier to work with the dimension properties.
html
<div id="container">
<span>A sentence that exceeds the width!</span>
</div>
css
div {
width:50px;
overflow:hidden;
white-space: nowrap;
}
js
var cont = document.getElementById('container');
var spn = cont.getElementsByTagName('span')[0];
//alert(cont.clientWidth);
//alert(spn.offsetWidth);
if(spn.offsetWidth > cont.clientWidth) {
alert("content exceeds width of parent div");
}
http://jsfiddle.net/Bn2Uc/2/