I have a very simple HTML web page that has one large image on it with several text boxes (drawn in the image) that I would like to have a user click on and a popup window open up with more text. Currently, I'm using hotspots and the behaviors tag in Dreamweaver to call a pop-up window for each box on the image.
Q1 - How do I hide the scrollbars on the popup window in HTML?
Q2 - Is there a better way to do this with little coding like a modal popup? I have lots of these popups with different text in each I will need.
Thank you in advance!
To hide the scroll bar there is some CSS you can use, attached below. And for making popups, I have never tried hotspot and behavior tag however I just created one a few days ago using position absolute and using display none and block. Basically, you have to create the whole design of your popup anywhere in the code and you then set it to display: none, and whatever click you have for it to pop up, you add a little javascript function to it which will change the properties of that popup to display: block or anything else that you are using.
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
Related
My page layout features a header and a main element. I set the main element via css to overflow: auto, so that a scroll bar appears whenever the content is larger than the screen.
However when I press Ctrl+F to toggle the browser search and search for something, the results on the page are highlighted as usual but the "minimap" of search results in the scroll bar that usually is there is missing.
I can bring that "minimap" back when I remove the overflow: auto from the main element, however that makes the scroll bar go over all the page and not just the main element as I would prefer to.
I tried this in current versions of Chrome as well as Firefox and both show the same behavior.
This element is the only scrolling one and the scroll bar is on the very right of the window - it just starts below the header element, which I find aesthetically much more pleasing.
Is there any way that I can bring the search result highlighting "minimap" back to the scroll bar?
You can customize the default webkit scrollbar using css, javascript but it won't be easy to customize. Custom scrollbars come in handy in this case.
You can use the npm package rc-slider and customize the scrollbar based on your requirement. Here is a working example of the scrollbar which highlights clickable markers at every 6th row.
I added the facebook Like button to my website and am having an issue. When the Like button is clicked, the box that pops up doesn't overlay the other content like it does on most websites, instead creating a vertical scrollbar in the container (expanding it).
This issue actually exists on facebook's own website:
https://developers.facebook.com/docs/reference/plugins/like/
If you scroll about half way down the above page and click the Like button, the same issue happens:
The only difference there is that they have overflow set to hidden, instead of auto.
How can this be fixed?
Add to your CSS file:
.fb-like{overflow:hidden;}
This should solve the problem.
So, I want to set next to each other a Facebook like button(html5) and a Twitter tweet button.
Everything is set here: http://jsfiddle.net/tGujU/
I have one big problem when I click on the facebook like button.
Because it will show the comment pop-up (which I want to see poping-up), the facebook iframe get then resized to 450px. Once the pop-up disappears, the iframe is not resized to small dimension !
I set the design so no big space is created between the two buttons.
But the problem is then, once you click on the facebook like button, you cannot click on the tweet button anymore because the wide facebook iframe is covering it.
What I tried:
Use overflow:hidden on the div#facebook_button but then, I don't get to see the comment pop-up. => NG.
Change the iframe z-index to got the twitter iframe on the top => Did not work.
Add a listener on the FB iframe to try setting overflow:hidden at the right time and remove it when needed but could not find a way to listen to its changes.
What I want to do:
Keep providers in this order and not put Facebook on the right.
See the FB comment pop-up once like button is clicked.
Being able to click the tweet button after I click th FB button.
Having it supported in IE8+, FF4+ and Chrome.
Any help is welcome.
You could raise the z-index of the Twitter button (iframe), so that it is higher than any of the Facebook stuff.
#twitter_button iframe{
z-index:9999;
position:absolute
}
Not the prettiest solution, but it works (see the Fiddle).
.fb-like { width: 75px; } is what I do.
This is what I tend to do...
/* make the like button smaller */
.fb_edge_widget_with_comment iframe {
width:47px !important;
}
/* but make the span that holds the comment box larger */
.fb_edge_widget_with_comment iframe.fb_iframe_widget_lift {
width:450px !important;
}
The first bit of CSS sizes the like button however you want (in this case it's sized to hide the count bubble). The 2nd bit of CSS ensures that the comment box will be visible when the button's clicked.
Did you try giving it a fixed width of 120px. I think that would cover it
I have a background that is a set of fairly complex gradients (done with CSS, not images). In the middle of the page is a fixed frame, and the content sits inside this frame. I can set overflow-y: auto on this frame to scroll the content, but I would like to be able to use the window to scroll instead.
Here is what the page looks like now:
I would like the scroll bar to be on the window instead. I can take the content outside of the frame and add margins as necessary, but the problem is that then the content will appear outside the frame. I could then cover it up on the top and bottom, but this is difficult/impossible because the background is not an image and is not solid.
Is there any way to have a transparent element at the top/bottom block text that scrolls under it? Can you somehow apply styles to content that overlaps?
Even the fanciest single-browser only solution that requires JavaScript is perfectly acceptable.
if all you're aiming at is hiding the scrollbar (and assuming you're ok with jQuery), i'd suggest to use something like slimScroll.
what's going on under the hood is simple: the designated container is assigned with overflow: hidden;, and attached with a hover handler - with the sole purpose of simulating a custom scrollbar in response to mouse-over events.
Try to explore jScrollPane features.
It's powerfull flexible JQuery plugin for working with scrollbars, possibly you will find solution with it.
Looking for a way in CSS (in the child theme) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed.
I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page.
However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable.
The area below where the transparant div from the Like Button is still clickable.
How to make it so I can still click the links below where a popout happens on my page?
Ok I found the answer -- I needed to use CSS to select the .widget element and not the .widget-pad element I had been using before.
Note to all trying to deal with implementing Facebook Like in WordPress widget, something like this can help if you are having trouble getting the Comments pop-out to display over other <div>'s:
.widget{overflow: visible}