I am using a Particle Js Canvas in my site. but the problem is it overflows in my other div .
as shown Below :
Is there any way I can hide it. the problem is that the canvas captures th efull sceen as its background but i want to show it only on paricular div and Hide from others.
THank You
Use overflow: hidden; in your JS Canvas div's parent.
Imagine you have this structure:
<div class="ParentDiv">
<div class="MyJSCanvas"></div>
</div>
Just add this:
.ParentDiv { overflow: hidden; }
Related
I have used a plugin to have two images with a slider ontop to show the new and old... Please see link:- http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/index.html
I am however struggling to fit the play button completely central to the white bar that moves, this is the code I am using for it:-
.js-slider-last-container:after {
background-color: #fff;
content: url(../play.png);
height: 100%;
position: absolute;
width: 5px;
z-index: 1;
}
Has anyone got any ideas?
Thanks!
Scott
Currently your css may not solve your issue. But I have an idea. You need to create image element on ".js-slider-container" div element as like before/after button. Now you need to dynamically move that image as ".js-slider-last-container" width value is change.
I will show algorithm
HTML
<div class="wrap">
<div class="js-slider-container">
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/play.png" id="arrow" />
<div class="before">Before</div>
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/before.jpg" class="js-slider-first">
<div class="js-slider-last-container">
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/after.jpg" class="js-slider-last">
</div>
<div class="after">After</div>
</div>
</div>
In html I have added only image
JS
container.mousemove( function(e) {
let widthVal=container.width() - (e.pageX - container.offset().left)
$( lastImgContainer ).css({
"width" :widthVal // container's width - mouse's position from left in the container
});
$('#arrow').css({"right":widthVal});
});
In JS I have changes tiny stuff. Currenlty i have adjust arrow image but you may need to remove that arrow image from css stuff with ::after css code + you may need to make buch animation on that arrow image too.
See this JSFiddle
I want to make the .newslink links all the way to the borders of the .content divs.
I have a slideshow of different content that gets messed up either if I set the a tag around the div or if I apply display:block / display:inline-block to the a element.
Right now the links are only around the image and text because of the 15px padding in .content. You can check this by hovering your mouse over the div (near the border) compared to over the image and text area. I want each link to completely fill the surrounding div.
Is it in this case possible to accomplish without setting the a tag around the div or applying display:block / display:inline-block to the a element?
Working Fiddle: http://jsfiddle.net/8tqryvu5/
Firstly, let's get rid of the Table markup as you're not marking up a table.
<div id="tableNews">
<div class="cell2">
<div id="slideshow">
<div class="content">
<a href="#" id="rightLink1" class="newsLink" target="_blank">
<div class="picDiv">
<img id="rightPic1" class="pic2" src="http://static3.businessinsider.com/image/5238c9c5ecad047f12b2751a/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg"/>
</div>
<div class="text">
<h2 id="title1">title 1</h2>
<p id="rightBoxSubText1">asdasd</p>
</div>
</a>
</div>
</div>
</div>
</div>
To achieve the effect you should apply the padding to the anchor link as this wraps both the images and text (essentially forming the border). Here's the part to take note of:
.newsLink {
display: block;
padding: 15px;
}
As it's an inline element you will need to set it to display:block in order to make it wrap the elements inside it. If you correctly apply the style to the surrounding elements then setting it to display:block will not effect the layout.
Hope that helps.
I am not 100% sure that I got right the whole thing but I think you can achieve this by using
.newsLink{position:absolute;top:0;left:0;bottom:0;right:0;background:red}
It will take the wodth of the slideshow, which is the relative element. If you want it to take the size of the .content and not more you will have to add a wrap in display block around you tag
Here is a jsfiddle: http://jsfiddle.net/8c041xy7/5/
You just need to absolute position anchor tag
.newsLink {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
I have the following code:
<div style="max-width: 100px; overflow: scroll">
<table>...</table>
</div>
I want to limit the size of the div, but have the table stretch as far as it wants (i.e. ignoring the max-width attribute of the parent div. How do you do this? Currently the browser resizes the table in attempt to follow the max-width...
In CSS file:
div {
overflow: visible;
}
You can't use the position: absolute; for the table element because it doesn't ignore the div...the div ignores IT. If you don't have something filling up the div underneath the table it will not show at all.
PS - I said to put in the CSS file on purpose. I see he has it in his HTML but you should rarely put CSS styles in HTML files. Using a .css centralizes and standardizes across the site and all that has to be set are classes and ids.
Set the position of the table to absolute, then it will not be constrained by the parent div
<div style="max-width: 100px; overflow: scroll">
<table style="position:absolute;">...</table>
</div>
I am new to html5, javaScript and jquery and stuck in a problem related to resizing and need help from the experts.
Problem is that I have a div inside which I have three divs.
1st is the title div on the top,and the other two are side by by side under the title div.The two side by side divs are placed such that one of them take 25% the space of outer div.and other one take 75% of width.
Now I want that when I resize my outer divs the inner divs should adjust them selves such that there width ratio remains the same.
But I am unable to achieve this.
So far I have done this
Resizing Div
Can any one please guide me.What I am doing wrong.
I would appreciate any help.
Crude answer is to just use percentages for your widths: http://jsfiddle.net/xV28s/1/
You should move all those style elements into the css though.
Try this:
CSS:
#parent { overflow: auto; }
#inner-left { float: left; width: 25%; }
#inner-right{ float: right; width: 75%; }
HTML:
<div id="parent">
<div id="title">Title</div>
<div id="inner-left"> </div>
<div id="inner-right"> </div>
</div>
PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}
I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?
You must use
$("element").on('mousedown', function(e) {}
Just change live to on