Actually i am using parallax.js for scrolling effect. but that parallax image was hidden into the top portion of the header there by i can see only the bottom side. i want to view the parallaxed image top portion or the full image.
i used data attribute
<div style="background-color: rgba(0, 0, 0, 0);" class="parallax-container" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="images/prodct-bnr1.jpg" data-natural-width="1360" data-natural-height="435" >
Thanks in advance
Maybe if you adjust the height of your div, for example I used 600px and also you don't need data-bleed it will move your div 10px up.
Related
I have many icons svg, I could use them as fonts if that is helpful and I would like to use ng-click(basically any kinda of click you know) the way that when i click on svg1 and svg2 wont be clicked. Till now i have tried allot of icons and many ways of doing it without success. I have upload to codepen small example, each region of that country have it's own svg which cover other svg's and make click on them impossible. Basic use of svg is below:
<svg>
<use xlink:href="#icon-region"></use>
</svg>
Since all <svg> elements in your page are absolute positioned and have both width and height of 100%, it's possible to only catch elements from the last element. That behavior comes from the way elements are rendered, within layers, like the example bellow:
+-<svg>--+
|+-<svg>--+
||+-<svg>--+
||| |
+|| |
+| |
+--------+
If all those elements have the same width, height and position you can only catch events from the last one, on the top of all.
To avoid this behavior you can do the following, with CSS:
.regionPosition {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
}
.regionPosition > * {
pointer-events: all;
}
This way you disable the event listening from <svg> elements – with regionPosition class – and catch only the events from their immediate children.
Since you're using <use> inside your SVG to get the actually graphics, you can't rely only on Angular to bind the event, because the elements are not yet there when you load the script. You'll need to attach the event listener to the document and then check the target before call the function you want. This can be easily done with jQuery, as follows:
jQuery(document).on('click', '.regionPosition > *', function () {
// Call your function.
});
I changed your code a bit to show how to do it, here: http://codepen.io/anon/pen/waLwrm. I'm using a simple window.console.log() call to just log the clicked element. You can change it to another logic in your final code.
Reference:
jQuery hover problem due to z-index
(Pre-posting update to my question: I figured it out before posting, but am posting anyways for the public's information-- even though this is pretty obscure stuff.)
I'm working on a new scrolling site for a game here's the working page: http://pman.mindevo.com/
I have been able to get all the backgrounds matched up and scrolling together for a parallax effect, but now I'm working on getting an animation that moves across the screen (eventually I'll work more on using SVG sprites to actually have the character animated), but I can't seem to get the pixel sizes to match up properly.
My latest and best working solution so far is to make the SVG the same height as the rest of the background images. The problem I'm having is at different browser widths the character's 'pixels' (I use this term loosely because it's vector) do not match up with the background's 'pixels'.
Does anyone have any suggestions in keeping him the same pixel-by-pixel size as the backgrounds at different browser widths?
Here's some information about the background SVGs (the SVG open tag):
This is one of the tree background parallax layers:
<svg xmlns="http://www.w3.org/2000/svg" width="2697" height="150" viewBox="0 0 2697 150">
Here's the character's ('Potatoman') svg header:
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="150" viewBox="0 0 10 150">
Originally it was embedded in the page as just an <img> by itself. Like so:
<div class="section2" data-1999="height:0;" data-2000="height:100%" data-3999="height:100%" data-4000="height:0" class="skrollable skrollable-between">
<h2> Some dialogue and potatoman animation happens in this section</h2>
<img src="images/theMan.svg" id="theMan" data-2000="left:-100%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:100%">
</div>
With the CSS like so:
#theMan {
position:absolute;
left: 0;
bottom:1.3em;
height:100%;
width:4%;
}
I had trouble getting it spaced properly vertically once it changed width.
Now that you've read this post, I figured out while doing it just how to make it work. If anyone has better ideas I will accept them as well. Otherwise I'm going to post my own answer to this question as I figured it out, but if anyone else is every working with Pixel graphics and wants to do what I'm doing, they have all the information right here.
So Here's how I had to change things around. First I removed the width property on the image (#theMan) and let it fall back to my basic img CSS like so
#theMan {
bottom:0;
height:100%;
left: 0;
position:absolute;
}
/* for reference img is set like so: */
img {width: 100%;}
Then I had to change my data attributes to manipulate the browser wide and browser high img to this:
<img src="images/theMan.svg" id="theMan" data-2000="left:-50%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:50%">
Since the image ended up centered in the page because it's width became 100%, shifting the entire image only 50% instead of 100% worked out, now when it scales it scales at the same rate as the background images as it's the same dimensions.
I have a problem with absolute positioning in XSL FO. When creating a document I have to add a table to the bottom of a page. The problem is that the height of the table is not known.
The following example shows my effort, but still the table is aligned to the top of the page.
<fo:block-container
bottom="1cm"
left="0"
width="100%"
height="auto"
position="absolute">
<fo:table
border="0.5pt solid black"
border-collapse="collapse"
text-align="left"
table-layout="fixed"
width="100%"
background-color="white"
font-size="7pt">
<fo:table-column column-width="60%"/>
<fo:table-column column-width="40%"/>
<fo:table-body>
<fo:table-row border="0.5pt solid black">
<fo:table-cell
border="inherit"
display-align="center"
padding="1pt"
padding-left="2pt">
<fo:block>abcde</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row border="0.5pt solid black">
<fo:table-cell
border="inherit"
display-align="center"
padding="1pt"
padding-left="2pt">
<fo:block>abcde</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block-container>
So the question is: Is there any solution how to align table to bottom of the page without knowing the height of the table?
I tried also to put the table in a footer, but if I don't know the hieght, I can't set the extent of the region-after.
Note: I have a block-container that has the same width and height as the page. The code above is in this container.
Note 2: I use fop 1.1
Throw it into a footnote. That grows up from the bottom of the body region to an arbitrary height. I tell my students this technique is useful for things like disclaimers at the bottom of the last page of a legal document. No block containers are needed; no measurements needed.
I'm making a page that will just display an SVG image, and here are the requirements:
the vector should take up the entire window
the vector should maintain its aspect ratio (defined in the SVG file itself)
the vector should crop/clip in order to prevent skewing
The CSS...
body {
background: url(/path/to/image.svg);
background-size: cover;
}
...works almost perfectly except that when the browser window becomes too narrow it tiles instead of cropping/clipping.
Here are some screen shots (please ignore the artifacts left by dabblet):
Here the window is close to the aspect ratio of the original image
Here the window is "shorter" than the aspect ratio, and the image is cropping (as desired).
Here the window is "narrower" than the aspect ratio, but instead of cropping, the image is tiling (undesired).
Here are some thoughts that I had...
Could I change the SVG image in some way to prevent this from happening?
Could I markup/style the page to achieve the desired results?
I would prefer to keep in the realm of HTML/CSS, but if Javascript is needed, then so-be-it.
Here's the dabblet that I was working with... http://dabblet.com/gist/6033198
After some trial-and-error, this is what I found.
Adding (to the original CSS):
html {
height: 100%
}
delivered exactly what I was looking for in the original spec.
Additionally, if I wanted the image to be center when it was cropped, I could use:
html {
background: url(path/to/image.jpg) no-repeat center center fixed;
background-size: cover;
}
Lastly, if I wanted it to be centered, always maintain the aspect ratio, but NOT be cropped (i.e., some whitespace is OK) then I could do:
body {
background: url(/path/to/image.svg) no-repeat center center fixed;
background-size: contain;
}
For me I had all other properties set except background-attachment:fixed. I had experienced the same issue on a site of mine for ages, one of the most elusive and infuriating bugs I've ever come across, but adding this to the html element seems to have finally solved it for me.
This css is working.Thanks
"background-size: contain;"
.cover{background:url(images/cover.jpg) no-repeat top center; display:inline-block; width:100%; height:400px; background-size: contain;}
<div class="cover"> </div>
Alright, here is a link to the site I am working on. http://danberinger.com/preview.html
I currently have the message inside its own div(#messagebox) and the picture in its own div (#picture). Both of these divs are floated to the left. I put them inside a container div called #intro_container. I would like to center this containing div, but am having trouble with it. I have tried setting the margins to 0 and auto but that did not work. This must be some sort of issue with the amount of different levels of divs that I am trying to work with....
Any help would be greatly appreciated!
Set a width on your #intro_container container, otherwise margin: 0 auto; won't work.
For 0 auto to work, you must specify a width.
You can put everything within a container div, with something like width 900px margin 0 auto, or you can simply apply these styles to intro container.
Right now your css is scaling everything to the viewport width, so float left sends the pictures to the width of intro_container, which has no defined width.
Also note, you can apply your id directly to the image! no need to wrap that in a div. It is good practice to style elements semantically.
sometimes it's good to center things like that:
<html>
<head>
</head>
<body>
<div style="position:relative;width:400px;height:400px;background-color:green">
<div style="position:absolute;margin-left:50%; left: -100px; width:200px;height:200px; background-color:red">
here attribute 'left' is half of this container width
</div>
</div>
</body>
</html>
always working