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.
Related
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;
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.
For a current project I'm doing I'm using PHP includes for my nav bar to save time when making changes to it. The nav bar is composed of a CSS sprite, which currently caters for the default background image for the anchor tags and the a:hover states. In this case having the same nav bar included on every page via the PHP include obviously works fine as neither of these states need to be conditional to any of the pages.
However, what I want to be able to do is to have a different section of the sprite visible depending on what page the user is currently visiting - just to show them what page they are on.
Without doing a PHP include I could have a different ID or class for each page (i.e. "page1Current") and just change the CSS accordingly. However, using the PHP include method I can't seem to work out a way to get around this.
I'm guessing that, using a bit more PHP, it would be possible to use some sort of IF statement to get the page address and use that to conditionally alter the CSS accordingly. Unfortunately I'm a total PHP beginner so I can't quite get my head around it.
I've not posted any code as I'm just looking to get the right idea, but if it helps I can post some.
Any help would be appreciated :)
Rich
You don´t need more php, you can set a class or id to every page on the body tag and give all your links a separate class as well.
If for example the id of your contact page is contact and the class of the contact link in the navigation menu is contact you can style that button on just that page using:
#contact .contact {
// highlight button
}
Why not include some a style tag in the html rendered by the include that changes whatever css attribute you want for your bar, ie :
<style type="text/css">#menu .navbar { background-position: 0 0 }</style>
in include #1 and
<style type="text/css">#menu .navbar { background-position: 50px 0 }</style>
in include #2