I am trying to add the thumbnails section of the js gallery in the footer of a web page. I've never broken up a gallery before and figured it's the only way to achieve this look
http://img69.imageshack.us/img69/5923/bsade.jpg
The link for what I have now is this: http://www.marisaraskin.com/two.html.
(The borders are just guides for me while I'm still working on it)
The CSS code for the thumbnails container is:
.galleria-thumbnails-container {
height: 100px;<br>
bottom: 0;<br>
position: absolute;<br>
left: 10px;<br>
right: 10px;<br>
z-index: 1;<br>
border:1px solid yellow;<br>
}
I'm not sure what my other options are for this. I was maybe thinking overlapping the content container over the footer with z-index. Though I'm iffy about that especially because everyone's screen resolution is different. I can post more code per request. I am not sure what else you need to see as of now.
In case you need to know I'm using a gallery js called "Galleria" (classic).
If I were you I'd modify the js script so that you can populate blocks that are not contiguous in the actual HTML code, but here's a rough approach to doing it all through css:
remove position:relative from #container
remove position:relative from .galleria-container
add position:absolute to .galleria-stage and remove left and right
positioning. Also, add top:90px (or something close to that) and
give it a width: width:920px.
change .galleria-thumbnails-container to use absolute positioning and
use the bottom:___ property to set it where you belong.
Basically what you're doing here is removing all the relatively positioning in the parent elements of the gallery so that the gallery segments all all being positioned with respect to the page rather than any of their parent elements. Once this is done, you can just modify the absolute positioning and width of the stage block and the thumbnail block so that they sit where you want them.
Related
I am trying to build a guide functionality for my application. As a part of this functionality, it is expected that a tooltip is shown next to the target HTML element and this target element is brought on top of modal backdrop that appears together with the tooltip.
The problem is that after significant effort I still cannot make HTML element show on top of the modal backdrop. Simple tricks like z-index: 10000 !important; position: relative do not help. Also changing parent elements' z-index by disabling it in Firefox Developer Tools (and leaving z-index: 10000 !important; position: relative for the target element that is supposed to be on top of the modal backdrop) does not help.
HTML of the application is quite complex with many elements. But I want to be able to "highlight" any given element by bringing it on top of the modal overlay knowing only its id. Is there an easy way to do that with JavaScript/React?
Hopefully there is a way to do this without modifying the DOM, which would be highly preferable.
UPD: Code demo - press hat button to show guide/tooltips
Remove the z-index from .form-wrapper and apply relative position with z-index for the targetted elements.
I did this by adding
d.classList.add("tooltip-active-element");
to App.js#77
Also added the class to the css file:
.tooltip-active-element {
position: relative;
z-index: 2;
background: red;
}
and removed the z-index value from other classes, the key one being the .form-wrapper class.
Working demo: https://codesandbox.io/s/tooltip-z-index-forked-fg9pt
I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.
Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(myEditor.getValue()));
});
});
So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.
You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:
#outputContainer {
height: 300px;
overflow: auto;
}
If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll;.
You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.
Have you tried something like this?
#outputContainer {
ovwerflow-y: auto;
}
This will add a vertical scrollbar, when there is enough content inside your container.
There are many nice jQuery plugins for adding nicer scrollbars though :).
http://enscrollplugin.com/ for example.
This is my first post so hello! :)
I have a problem with coding my site!
May I show it on this picture:
I want to make a slider (with captions for each slide) which is aligned to the right edge of content div.wrap. But left side of it must by to the left side of the screen. It must change to the screen resolution (always to the right edge of the content div.wrap Something like this
Right edge of div.wrap must be a limit.
I have no idea how to do this. The slider must be a background fader? Or img fader?
Please help me or show me how to do this on similar example.
Further to #Itay's answer, here is a jsfiddle which might help you with the CSS for this.
http://jsfiddle.net/mmWq6/4/
I've used the example of a slider that is 500px by 200px. This is what I guessed would be a miniature version of the webpage I expect you're creating, if you scale the 'Result' window narrower and then wider again you'll see that I think the design works how you want it to.
This demo basically demonstrates Itay's comments, which were to have a wrapper (#slider-wrapper) which had the CSS position: relative and a div within that with the CSS:
#slider-wrapper-inner {
position: absolute;
right: 0;
}
Then within that are .slides which are relatively positioned and .captions within them that are positioned absolutely, as above (but with an extra line: bottom: 0;), so that they sit in the bottom right.
Got a page that displays some buttons (background images, etc) and they are all clickable. What I want this specific button to do is open the target page in another browser tab using *target="_blank"*. The way it is setup as the href in a div I cannot do this. Any ideas on a work around for this?
<div class="dashboard_navbutton" href="Home/RequestRedirect" style="background-image: url('#Url.Content("~/Content/images/Form_button.png")');">
<p>Insert witty text here</p>
</div>
Just make that div an a and add display:block; to the style.
EDIT: Ensure that your chosen DOCTYPE supports the use of p inside an a element. More generally, it should use the computed style for display rather than the tag name to determine if an element is inline or block in terms of having one in the other. I believe the HTML5 one is fine: <!DOCTYPE html>.
trap the onclick event for the div, call a javascript function, have the function openthe window.
html snippet
onclick="opennewwin()"
function opennewwin(){
var awindow = window.open(loc, "blank", "height=500px,width=500px");
}
I was trying to dynamically add divs that would also function as links.
This was my solution using CSS.
First the container needs relative positioning.
.container {position: relative;}
Next, the link needs to fill the container.
.container a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
Like I said, I dynamically assembled the div, but the html would look something like this:
<div class='container'>[some other content]</div>
The container must be position relative, otherwise the position absolute link fills its first position relative ancestor (probably the whole viewport).
Of course, you can add styling to the div or the link. Note, I was using a position: sticky nav-bar, and I had to set it's z-index high in order to avoid collisions with the div buttons.
Pros: whatever styling and targeting you set for your links will apply. Good 'style': doesn't put a block element inside an inline (should avoid browser issues, though I haven't thoroughly tested it). Does not require any other languages or frameworks.
Cons: Not as simple as Niet's answer, but shouldn't be Doctype dependent.
I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.