Okay, I believe this one will be a hard one... I would search the internet first, but I can't put the question correctly, I only have images and wild guesses as to how it is done. Maybe you will find it interesting too, maybe it is a piece of cake for you... So here we go:
I believe you (maybe) are familiar with Russia's and Ukraine's social network called VKontake.
It's like Facebook, well, the idea was taken from Facebook.
So, notice the scrollbar and how much space there is. When I click on the underlined this opens:
See how the scrollbar changed, and you can only scroll the content of the "wrapper div".
But, the background is still the vk.com/idmyidnumber, that means no redirection occurred, it only added ?w=wall57371848_7204
So the question is as follows:
How to "print out" a div that appears on the current scroll position, and is scrollable like on the image.
If you are interested, I can supply you with the code. If it's easy as 1 2 3, please answer :)
The trick is that popup appears to be a child of an element, which has "posision: fixed" style and its width and height are equal to window's.
This fixed element contains another element which has more height (and which contains modal's data), therefore fixed element shows scroll.
Fixed element's scroll overrides body's scroll.
I believe you want a modal window. There's a great tutorial on how to create one here:
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
Also the overflow element of the DIV tag will define the scrolling capability for the div that is brought up in the modal window itself. That's a CSS thing and is better covered here:
http://css-tricks.com/almanac/properties/o/overflow/
Hope that helps!
You need to provide your top level modal div with CSS:
text-align: center;
vertical-align: middle;
position: fixed;
width: 100vw;
height: 100vh;
The position: fixed; fixes its location against the browser.
Related
We have a website built in wordpress using WP forms.
On any page where a contact form appears there is a random _ character on the top left. This character can't be highlighted, can't be selected and doesn't appear in the DOM.
It doesn't appear to be part of any :before, :after css rules which was my first guess.
The anomaly can be found here: https://www.lazyduck.co.uk/contact-us/
Does anyone have any suggestions how to find where it came from, and why we can't inspect it?
There is a :before CSS attribute on the element <li class="choice-1 depth-1">. It looks like it's used for styling, however in the case of this page obviously it's not working very well.
If the problem only exists on the page you linked to, you can disable the box with the following CSS:
.page-id-168 .post-content ul > li:before {
display: none !important;
}
Otherwise you'll need to find a way to disable that CSS across the whole site.
Edit You can inspect the element by right-clicking on it and choosing Inspect in Chrome or Inspect Element in FireFox.
Hi there i was wondering if anyone could help me ?
I have an issue with CSS navigation dropdown that i have previous implemented in to designs but for this design the dropdown menu appears and are sometimes able to hover over the links but then sometimes it takes 5+ tries before you are able to hover over the links again abit hit and miss.
I have provided a link to the menu and also my code below its possible ive missed something so simple but any help or advice would be greatly appreciated.
Link: Design / Menu
Code: CSS Code
Im unsure how to input the css code in to my post so i have linked above.
thanks in advance
Chris.
The problem is the space between the opener and the menu.
You can easily solve this removing the space (that is a margin) like this:
#nav ul {
margin-top: 0;
}
Or, if you want to mantain the space, replacing the margin with padding, like this:
#nav ul {
margin-top: 0;
padding-top: .6em;
}
The padding will allow the menu to stay open.
Hope it helps. Good luck.
Not sure if this is the right place to ask, but I’ve had no luck elsewhere and have often managed to find answers to stuff before, by looking at other people’s questions and answers on this site.
I’ve recently installed a WordPress plug-in (WP Subtitle) that allows me to assign a subtitle to posts and pages. Got a couple of problems though:
The following line is what displays the title of my blog posts as links in the Sidebar:
<?php get_the_title() ? the_title() : the_ID(); ?>
I’ve amended it so the subtitle is displayed as well:
<?php get_the_title() ? the_title()+the_subtitle('<span class="subtitle">', '</span class="subtitle">') : the_ID(); ?>
The links themselves, work fine – but if the mouse only hovers over the title, only the title is highlighted, whereas if the mouse hovers over the subtitle, both the title and subtitle are highlighted (which is what I actually want). Does anybody know how I can achieve this please? For the title and subtitle to be highlighted regardless of which part of the link the user clicks on?
The second problem is that the code only seems to work for my posts, and doesn’t display the subtitle for my pages at all. (This is only in the Sidebar though – the individual pages and posts both display the title and subtitle fine).
If you need to see what I mean, my site is http://www.retelevise.com. Any help or suggestions would be really appreciated.
Thanks,
SN.
What's Going On
The issue here is that you are adding a layer of HTML inside the a, in the form of a span. Your CSS :hover rule only applies to itself, not to children. So when you hover over content directly inside the a, only content directly inside the a is highlighted. You can go two routes. The first involves removing the extra span, which you need to keep to change the color.
The second method is quite simple though, and just involves one extra line of code. We just need to add another selector to tell the browser to highlight all child spans as well as the as themselves. Your current :hover selector is .post-excerpt-title a:hover. We just need to add in .post-excerpt-title a:hover span, and it'll work perfectly.
Code
Current CSS: (Minus the comments)
.post-excerpt-title a:hover {
color: #F29B06;
font-weight: bold;
}
New CSS:
.post-excerpt-title a:hover, .post-excerpt-title a:hover span {
color: #F29B06;
font-weight: bold;
}
Screenshot
Okay basically for some reason, I barely noticed that when I load up my project the scrollbar is missing on all browsers, which is weird, i can force scroll by clicking down on the little mouse ball on my mouse. Although on internet explore that doesn't work at all.
I tried to retrace my steps after modifying my code to see what could have gone, but since i barely realized it, not very sure when it occurred. Thats why I can not provide a problematic code.
I'd appreciate it if someone could take a look at it for me.
Removed link Because answer is solved.
You have overflow:hidden on your html. If you change it to scroll, the scroll bar appears.
If you are wanting to stop horizontal scrolling, use overflow-x:hidden
your body has the following css.
#wrapper {
overflow: hidden;
This is causing the scroll bars to be hidden;
I would like some help with this problem please.
I am trying to create a php website with tabs and to keep the same customised scroller in every tab. These scroller codes I found works fine but the customised scroll bar stops showing in tab 2. I notice that this happens when I start using the functions for the tabs (CSS & Javascript).
The Sample website can be found here --> http://www.swan10.nl/stuff/scroll/Scroller.php
Tab Functions and Scroll Functions have been marked accordingly in Scroller.php.
The codes for the tabs were also found and modified, perhaps one of them is cancelling the other? If yes, will there be a way to fix this?
This problem has been frustrating me for hours now...Thank you for your help in advance.
I am guessing it is because you are reusing the same id in your html. You have two divs that both use id="mycustomscroll". ID's must be unique to each element on the page. Your flexcrollstyles.css files targets an element with that id to style the scrollbar.
#mycustomscroll {
/* Typical fixed height and fixed width example */
width: 490px;
height: 520px;
overflow: auto;
/* IE overflow fix, position must be relative or absolute*/
position: relative;
padding: 5px;
background: none;
}
If you want to resuse css styles across elements then you should look into using classes first. Until you can produce clean code it is difficult for people here to diagnose what is wrong. But fix that to start.