I'm working on a Firefox extension and am out of ideas on how to implement a floating button. I need a button that is overlayed on my page that I can show/hide and dynamically position just about anywhere on my page. I thought I could do something like a fancy CSS tool-tip except replace it with button functionality, but that idea failed because I couldn't pull my example apart well enough to understand what all I need to include, need to change, etc.
I've thought about using jQuery(though wouldn't mind avoiding, unless it makes this painfully easy) but will be looking more into that as a possibility now. If anyone can offer a tutorial link, ideas, sample code, anything to help get me moving in the right direction I will greatly appreciate it!
Thanks!
Edit: Clarification
I'm not entirely sure how to actually create the overlayed button. I tried to create a a floating div with some text in it, and nothing showed up, but I got no errors, which means I'm doing something wrong, but I have no idea what that is. http://www.fijiwebdesign.com/blog/css-tooltips-floating-html-elements.html If you take a look at that webpage you see that there is that floating "feedback" button, I would like to create something similar, only it wouldn't be anchored to the sides, but I could position it over text, etc.
#floatingBtn
{
position: absolute;
z-index: 10000;
top: 50%;
left: 50%;
}
Thats the CSS I used to try and float my div. I don't know if I'm creating the div in the wrong place or... I thought if I could get a floating div with some text, I could turn that into my button.
position: fixed;
Should make everything work out for you. Absolute positioning is relative to the parent element or to the html element if no parent was found.
Related
Finally trying to learn responsive design and needed a slideshow. I was able to easily get Owl Carousel up and running on one page and love it (right above footer on test page): http://cismiami.org/new.html
I'd like to tweak the slideshow to use for staff photos: http://cismiami.org/owlstaff.html
I found instructions for switching to arrows and getting them on the same line as the images, but cannot figure out how to get them to appear outside the image carousel instead of superimposed on them. I'm using a separate folder for the CSS files so I don't mess up the first sample, but here are my CSS files for the Staff page:
http://cismiami.org/js/owlstaff/assets/owl.carousel.css
http://cismiami.org/js/owlstaff/assets/owl.theme.default.css
Any help would be greatly appreciated.
I'm not a professional (just a hobbyist), but would like to think i know bit of this and that. It's difficult to test this myself since most of the assets are elsewhere and you're working on someone else's code, which itself is often messy to begin with. If you would've designed and coded it from the ground-up, you would know exactly how to do it. Learning so much in the process.
Anyways, in 'owl.theme.default.css' the arrows can be customized as you said. The quick and dirty method (and bad solution in this case) of getting the arrows outside of Carousel would be to add a negative positional value to left and right arrows. Since they are absolutely positioned, they can be moved around quite freely but are not exactly responsive on their own. This following method is breaking their intended purpose, staying on top of the pictures and thus with the flow.
Add negative value to left and right, say 40px:
.owl-prev { left: -40px; }
.owl-next { right: -40px; }
This will however break the responsiveness, since once you start scaling down the page, the arrows will disappear outside of the flow of the page. They are absolutely positioned after all, and reliant on their parent / container objects. Maybe there's a way they can shift back to these original positions once scaled down enough but it's difficult to say from these bare messy beginnings. So many things can go wrong. Maybe Media Query methods once it reaches certain pixel count, then changes to left:0; right:0;? I haven't used them myself, but will need to with my current project soon enough.
In my opinion, shifting the arrows outside of the nice responsive design is also against the look of the site. It'll break the cohesion. To me these arrows look absolutely fine on top of the pictures and hardly intrusive. Maybe adding some transparency / opacity to the arrows would make them less problematic to your eye, hover over them could resume their current visibility? That's about it for now.
I'm very new with JS, and I don't even know whether what I try to do is doable. Some guys told me "try javascript", and google can't help me because it's too specific.
Ok so, firstly I have some huge text in the center of my page. So far so good. Call it the "main text"
Then, on the side of the main text, there has to be another column containing more text blocs. But this time, these blocs have to align with the height of specific words found in the main text.
You will probably understand better with this picture :
Any idea how to do that ? thanks !
Use CSS and HTML, there is no need for JavaScript. In CSS you can use top:; to vertically align an element, e.g.
.text {
top: 40%;
}
This will align an element with class "text" 40% of the pages height from the top. Use % as your units to make the text align correctly no matter what size the window is.
You don't need JavaScript to do what you're trying to do. All you need is CSS and html.
First of all you need to take a look at basic html layout here.
Take a look at this Fiddle its something similar to what you need
Guys didn't understand you. It is really hard to find out the x/y position of the word in the div for a lot of reasons. The best way for you is to wrap the needed word with some tag (kind of span or something). Here's a jQuery plugin to do that.
Then seems you will not have troubles to find out the position of your tag for example with jquery position method and to give this position to your left column text.
I'm looking to make use of the excellent Javascript widget called ContentFlow:
http://jacksasylum.eu/ContentFlow/index.php
However, in my ExtJS application, I have a need to print text inside the images that are scrolling by. Not being a CSS whiz, I'm really struggling to do this. Any insights would be most welcome!
I think that you should add the following styles in .caption class. Something like that may work.
.caption {
position: relative;
bottom: 125px;
}
Apart from that, it just an issue of playing around with the bottom value to position it at your will. Also, don't forget that you could add left, right and top attributes as well, if you need to.
What I'm saying is, I have some extremely long pages on my website, which can make it annoying if my visitors need to scroll to the top of the page to be able to navigate to another page.
I'm not quite sure what I would call this but any Google search that contains the words 'DIV' and 'float' come up with completely unrelated results...
What I'm looking to do is create a DIV that stays at the top of the Screen (not to be confused with the page) so that if the user is at the bottom of the page, they can still see the navigation bar just floating at the top of the screen. What I can think of is to position the DIV relative to the position of the screen but I don't know how to code this.
I'm happy to use JavaScript (preferably in the form of jQuery), but if you know how to do this using CSS, I would favour your response.
This might help: I know a little bit of jQuery and JavaScript and I know a good deal of CSS and HTML.
Thanks in advance.
fixed position has exactly this purpose and this is pure CSS:
div {
position: fixed;
top: 0;
}
Try this:
<div style="position: fixed;"></div>
You should be able to use CSS Fixed Positioning
#eleID {
position: fixed;
top: 0;
}
I've noticed on facebook, when viewing an image that is larger than the height of your browser window, it will alter the scrollbar of the entire page, so that scrolling up and down will reveal the parts of the image you're missing.
Having not been formally trained in the art of JavaScript/CSS, maybe I missed the lesson where I was supposed to learn how obvious the answer to this question is. Regardless, I thought I'd ask and see if you guys could help me understand how to override the browser's default scrollbar behavior.
I'm pretty sure this is the default action in HTML. I'm not exactly sure what you are looking at but this maybe helpful.
If you are looking to do the same thing Lightbox maybe what you are looking for.
Figured out what I was going for...
To use the facebook image viewer theater as an example, when you click to view an image, it will set body's overflow to hidden. At the same time, they will fade in their theater div, whose properties are something along the lines of:
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
That way, if the image is taller than the viewing size of the browser window, it will place the div's scroll bar in the position where the body's scroll bar would go.
Again, maybe this is obvious for all of you. I'm still learning these tricks as I go.