This is the second question i have had to ask regarding the building of my site and it involves Javascript which is well over my head.
The problem:
When the user highlights over the menu (sprybar) and causes the drop down to appear on the About Us section, then clicks an image in the gallery the spry bar somehow overlays itself over the image the user has clicked on - very annoying!
here is a link to the site http://sweetvision.co.uk/dynamicpages/gallery.html.
Also I'm a complete amateur at this website building stuff so don't laugh too hard so any other pointers would be great also!
if code is required i will post it up.
Thanks in advance.
Your z-index for your menu is way too high (at least higher than the lightbox's).
sweetvision.css:633
ul.MenuBarActive {
z-index: 1000;
}
Try removing this rule altogether.
Related
I've been working on a site using Squarespace, Miller template, but have not found any answer on the Squarespace foras. I found a code that supposedly should do what I am asking for – that is to remove the scroll indicator from the page I apply it on. The only problem is that it apparently removes the scroll indicator from all so called "index pages", even though the code is only injected into the page header of the index page I want the scroll arrow to be removed from.
The site is: https://.kallemoberg.com
I want to remove the arrow from the home page only (it is only barely visible there, but it's there, around his feet). I've used the following code which I got from this site: https://www.ghostplugins.com/steps/8ehn58jk
<style>
.Index-page-scroll-indicator-text, .Index-page-scroll-indicator-arrow {
display: none!important;
}
</style>
PS: When writing this post, the code above is not active. I'm a n00b, and have tried my best to look around for solutions, but now I've come to a dead end. Any help with this would be much appreciated! -^-
Recently someone has asked me to solve a little problem on a website of theirs, but I can't really figure out where it comes from. The site uses Concrete5 with Tweetcrete installed, and I use a tweetcrete block to display tweets, both on the homepage and on a dedicated social media page. In all the blocks though, the tweets are displayed with a little bird icon attached, which doesn't work well when the window is resized - it obscures the text. I cannot find where that icon coms from though, there doesn't seem to be anything in that block that causes it. There is nothing special about the code either, no styles.
To see the the problem, visit the homepage.
It'll be on the right hand side, towards the bottom.
You can override it via CSS like so:
.ccm-tweetcrete-timeline ul li {
background-image:none;
}
Developers made new checkout section on our website but the pages don't size to ipad or smart phone. There are checkout buttons and important elements on the pages that need to be seen by buyers, but they are being left off (pages cut off the right third of page) --
I've been researching briefly for a quick answer -- the rest of our site uses tables and this section uses css and divs only -- is that why it doesn't do it automatically? I'm not talking about media queries -- just the full page resizing to the screen width automatically...
I don't want to use scrollbars but even that solution at this point would give a visitor the ability to actually checkout on these pages...
Can anyone help? It would be greatly appreciated.. If it is more complex, that's fine, but I suspect something can be done to make the pages fit (and zoom if need be) or (gasp) scroll..fairly easily.
Thank you in advance for your help!
Ok, that section does not allow scrolling because is disabled from the css stylesheet.
You can get back the scrolling by editing the css. Look in the css file for the styles of .section. It will have a overflow: hidden; property. (it seem that is stored on file screen.css, line 435)
Replace it with overflow: auto;
You'll then be able to do horizontal scroll. But in the end, that is not a real solution. Since it seems you are not a coder, you need to get someone to recreate the styles of your website in order to make it actually responsive.
I recommend you to use on your website bootstrap, which can be used to create a responsive navigation.
Hello
I have quite a strange problem using quicktabs. I used the framework theme to develop a custom look for my site. I used quicktabs in the center content area to create a tabbed look for placing links within the body. Everything is working fine. However, when I view the site in IE8 at a resolution if 1024*768, I have trouble with a few links. It seems that sometimes the first link under my buttons are difficult to click. The link is there - I can actually click it, but it is very difficult to locate - it only appears at the very beginning of the link text - it is not the first letter, it seems to be only the first pixel.
I looked at the source and everything seems to be correct - I can't figure out what could be wrong.
Has anyone seen any similar behavior that might be able to point me in the right direction for a fix for this?
Thanks for any thoughts.
Edit - I looked further into it and I think it has something to do with my CSS. I disabled css in ie8, and every link is clickable, even the ones that were difficult to locate earlier. I guess there must be an overlapping of containers or something, so I will have to start messing around with those files.
It sounds like a CSS thing, have you inspected the elements in question using the developer tools (press F12) to see whats going on?
I found the solution. In the style.css file for my theme, the .block had position: relative; applied to it. removing that bit of themeing appears to have fixed the link issue.
Thanks
I have created a CSS dropdown menu using suckerfish. The problem with it is when you click the top level nav item that takes you to category pages, the pointer is still over that nav item and the dropdown appears automatically in IE.
Its fine for Firefox as the dropdown will not appear until I move the mouse, however IE just kicks in straight away without any mouse movement at all.
As the menus are quite large the user is unaware that the page has changed underneeth.
This site http://www.foodnetwork.com/ seems to achieve what I want, with a slight delay before the dropdown appears again. I know they are mixing it up with JS and CSS, but cant quite work out what they are doing.
Any thoughts
I know you are currently using a different technological solution to this problem, but please at least take a look at my suggestion before you judge it. I'm not good enough to explain it outright, so I'll just give you a couple of bullet points and then link to the solution in an effort to assist you.
This solution contains these attributes:
No client-side scripting of any sort (Javascript) was used
Absolute browser and platform compatibility
Text scaling friendly
Narrow window width handling
Functional for non-CSS, or CSS-disabled, browser
Placed into the Public Domain
The site where the file is posted uses this menu (it's owned by the writer). So, please visit this GRC's Script-Free Pure-CSS Menuing System page.
I really hope this helps you!!
Use jQuery's hoverIntent to achieve that delayed effect. In addition, the menu stays there even if the cursor momentarily moves out of the menu. Prevents that distracting flicker effect of menus appearing and disappearing.
Just throwing this out there, since there may be other changes you wish the menu had as well:
You may want to consider Superfish (an updated/upgraded [and possibly overkill so take a look] version of Suckerfish), one of the additions is the delay option on the menus.
So I got the solution for this.
I added the CSS with JS in the head of the document and set a small delay on it. This way when the user clicks the main nav link the dropdown is hidden by default with the CSS and then made to reveal with the CSS that is written in with JS. The user sees a page without the drodown on page load, and then after 1.5 secs the dropdown appears, therefore showing the user the page reloaded.
// Add dropdown styles
function addDDStyles() {
var head = document.getElementsByTagName('head')[0];
var logindiv = document.createElement('link');
logindiv.setAttribute('type', 'text/css')
logindiv.setAttribute("rel", "stylesheet");
logindiv.setAttribute("href", 'http://files.stv.claw/css/dropdown.css');
logindiv.setAttribute("media", "screen");
head.appendChild(logindiv);
}
setTimeout('addDDStyles()', 1500)