Masonry space between every two items [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Recently someone asked me if I could put in google adsense in his website. He has a masonry style layout with two posts on each row and a sidebar.
He wanted the ad to be displayed between the first and the second row (see image below)
See image here
1 = the post in a masonry element column with dynamic width and height
2 = containing div of all post
3 = where the ad should be placed
My initial thought was to try and wrap each row. The container did not hold the absolute masonry elements however.
Secondly i tried giving the container that i had put around every other two posts to get the height from the first item but that didn’t work since i then got the correct height for that container but it didn’t push the second row down either with margin or padding.
Is there any other way that this could possibly be achieved? Thanks!

As phpdna has mentioned, go with the stamp!
container.masonry({
itemSelector: ".item",
stamp: ".yourAd"
});
and then apply the yourAd class to your ad's div.

Related

I want to change the default order in which the tab key goes from one field to another, but the tabindex property doesn´t work [solved] [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 days ago.
Improve this question
I have a form in HTML with several fields ordered in two columns. The tab key make the browser goes from top to bottom in the first column and then start from the top of the second one, but I need the order to be row by row.
I try using the tabindex property in my javaScript, but those fields with that property are omited by the browser.
An user gave me this links where explain why is not a goot idea to use tabindex:
https://karlgroves.com/why-using-tabindex-values-greater-than-0-is-bad/
I solve the problem editing the html/jsvaScript.
Instead of having 2 columns I wrote rows with two div inside.
The row has display:flex attributte,
row div has width: 47%
and
row div:first-of-type margin-right:6%
That solved my problem and make the tab order works the way i want.

Table cells lose spacing when inside div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 months ago.
Improve this question
I'm building a web app using HTML & SVG, and I've run into a weird problem with tables. When I move my table into a particular div, all the cells lose their spacing.
This is my expected result:
This is what I actually get:
To achieve the expected result, I put my table 'habitruler' inside 'main' but above 'habits':
What I want to do though is put 'habitruler' inside 'habits' like this:
All I'm doing is moving it inside another div, but the moment I do that all the spacing disappears between cells as you see in image #2.
This is the css for the div 'habits':
And this is the table inside 'habitruler':
This even happens when I remove all the other child elements from 'habits'. I can't find anything out of the ordinary that would cause this. I also can't find any information on tables that would explain this behaviour. Does anyone have an idea why this is happening, or what I can try next to find out?
habitruler maybe inherits style from habits, try !important
(also show css from devtools for habitruler)
Try using:
table{ table-layout:fixed; width: 100%;}
If it doesn't solve the problem please show what's styling and is having. So, I can propose better solution.

Smooth Scroll is not working properly [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have copied javascript code of smooth scroll from stackoverflow and modified in my page but it is not working.
The Original Code is given here:
http://jsfiddle.net/swfour/dN4S4/1/
The Modified Code :
http://codepen.io/anon/pen/VYmLva
There are several issues:
JQuery was not linked in your codepen
Your ids in your a tags looked like this:
id="#sld1" //should be just sld1 no #
instead of this
id="sld1" // # isn't included in HTML, thats a CSS indicator
you were calling:
onmousedown="autoScroll('slide1');
In your a tags but autoSCroll was not defined in your JS
This line in your if statment:
$(this).get(0).id
Should just be $(this).attr("id")
overflow: hidden on your body, html was preventing the page from animate scrolling down. Remove that.
In fact you don't need those if statements at all. Since you're calling the id of the div in your href you can simply do:
target = $(this).attr("href");
Which would return: #slide1 or #slide2, etc. That will target your div of the same id
NEW CODEPEN

Height on page coming from an unknown source [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I usually build my wordpress sites by using a theme and creating a child theme. Generally I have done this with Wordpress 2013, but this time decided to take a crack at it with 2014. I have run into a few issues but finally landed on one I have not been able to resolve.
http://demo.diocesan.com/robert/
On this page, it tells me the page has a height of 2000+ px. When I try to find where this height is computed, I find nothing. I have set the height on many different elements to 1000px (even the HTML tag itself) and I still have this mysterious height value.
I suspect this has something to do with the 2014 masonry script (Admittedly I am not great with javascript) and any direction on this would be helpful. So my question - Does anyone upon glancing at this know where the height is coming from and what steps I can take to remove it?
The problem is the CSS on #secondary - it has min-height: 100vh applied, which will make that one element at least one full viewport tall.
It's then hidden because the following element (#primary) which contains the content is given a float: left which makes it move up, so that it appears that the gap is beneath #primary, even though it's not.
Removing the min-height on #secondary, or setting it to a sensible value, will fix your problem.

AutoScroll to next div after a pause [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Basically I have a website where the title of the page you are one takes up the entire screen and then the content is below after you scroll. I was wondering if it would be possible to make it automatically scroll smoothly to the next div after maybe half a second on the "title screen". You can see what I am talking about by going on this page.
The class name for the content is contactus, but I made a specific class name for the scrolling called scroll-down. This is because I want to use it in a few different areas, same concept each area.
Looking at your code, this is something that works:
$(document).ready(function(){
$('html,body').animate({
scrollTop: $('.portfolio-header').height()
}, 1000);
});
Note that we are using animate() to smoothly scroll (in a period of 1000 milisecs) and we are also getting the height of the previous block .portfolio-header in order to know the number of pixels to scroll.
And finally, we wrap all of that in a .ready() function to wait for the document to be ready before doing the scroll.

Categories

Resources