Menu not displaying with Superfish HTML and CSS - javascript

I had posted what I guess was a too specific question earlier. Let me rephrase it with a general problem I am having.
I have one html file that is linked to a css file. I have superfish.js in a js folder in the same directory. The menu does not appear.
What I have done:
download superfish.js and place it in js folder
copy superfish.css file and place it in my .css file
load js at the top of my html file
Thats all i could find that I was supposed to do. I would say it seems like a CSS problem, because when I change
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
to
.sf-menu ul {
position: absolute;
top: 0em;
width: 10em; /* left offset of submenus need to match (see below) */
}
the menu appears in the top left. I copied the horizontal nav CSS from superfish and it still only displays horizontally. So have I missed some other basic step?
HTML: http://smart-art.org/cadop/index.html
CSS: http://smart-art.org/cadop/oneColFixCtr.css
The index.html shows the menu at the top left, this is because I changed the CSS to make the -999em to 0em ... so I assume the JS is working, but I'm totally baffled.
I hope this isnt too specific to me as I am using Dreamweaver. I clicked one column layout with CSS in a different file. Copied the CSS from Superfish website, and placed the JS files in the folder.
Any help?

First, some suggestions:
When developing a page, add your JavaScript and CSS in small chunks so your page/site doesn't grow to an unmanageable size before you understand what's going on.
When adding something new, sometimes it's helpful to add the CSS in the tag. Then ensure the problem isn't caused by a linking problem.
Now to your question. Based on your page, it looks like your HTML was messed up. All I did was copy the HTML from the Superfish v1.4.8 example page and replace your menu.
It looks like your menu is missing many of the necessary classes for the menu. For example, look at the difference between your top menu element and the sample's:
Your code: <ul class="sf-menu">
Sample code:<ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-shadow">
I also used the original CSS for .sf-menu ul.
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
Working Example: http://jsfiddle.net/HtBUZ/
Action Items to fix your page
Correct your HTML using the Superfish v1.4.8 example.
Make sure your scripts are correct.
Your page is missing JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Your page is incorrectly linking hoverIntent.js.
Revert your CSS to the original -999em value for .sf-menu ul.

Related

Bring element on top of modal backdrop

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

Css Double window scroll

I have created a website with many css files and js files. It was previously working fine but i dont know what happened it is now showing two scrollbars , one is of the main window and other in the content. Secondly there is a huge space where the content ends. Its all white space . I have been trying to fix it for a while but no help
Link of site
You just have to scroll up down and you will see it. it only appears on the homepage. It goes when i do any change from the borwser in css.
Just remove overflow-y and height rules for html - line 1285 and 1357 in custom.css. I don't even know what could be the function of setting this.
Honestly, it's not clear to find when you are updating page content, but once you have set your html with some of that rules:
html {
height: 100%;
overflow-y: scroll;
}
And then extend the updated content of your page, the page increased but 100% mean less then you need. It's getting normal with no-scroll.
I'm not sure that it will solve problem. You have to check out console errors that stops your JS to execute with messages like:
getElementsByTagName
On line 99 of yours custom.js wich stops to execute on this fatal error.
In your file custom.css in line 13438 uncomment this section
body, form, select, ul, div{
/* margin: 0; */
/* padding: 0; */
/* outline: none; */
}
Actually you have set body outline:0 in custom.css in line 1247
If outline will be none then all will be fine.

when a div is not displayed, forget this css rule

I have a situation where I have 3 divs :
- Menu - Header (#rt-top-surround)
- Showcase (#rt-showcase)
- Main Body content (#rt-mainbody-surround)
The Menu is 'sticky' with position: fixed. Therefor I have to move the div that is rendered below it with padding (padding-top: 120px; margin-bottom: -120px;).
The problem that I run into is that on some pages the second DIV is #rt-mainbody-surround. (Than this div is rendered properly.)
But on other pages I have #rt-showcase (that displays some promotional images) as second DIV followed by the main body DIV.
So what I would need to implement is a rule that not adds the padding & margin on the rt-mainbody-surround div when the rt-showcase is displayed. And I'm not wether to do this with Javascript or with PHP and how to accomplish this.
I've made an illustration to show what I exactly mean.
Hope anyone can help me out here! Thanks!
Illustration
If I understand the question correctly you want a margin below a specific div only if another div isn't actively visible. The best way to handle this is to add a bottom margin to the top div and negative margin to the div below it (that can be shown and hidden). The css for that is:
.top {
margin-bottom: 20px;
}
.middle {
margin-top: -20px;
}
Sometimes a picture is worth more than some code though so I created a fiddle here. Enjoy!

Animating divs in a set

I currently have a list of objects (projects) that are presented to the user initially as div's that have have a 100px x 200px height/width, position absolute, and float left. This list is contained within an angular ng-repeat method (not sure that makes a difference in the overall question but figured I'd add it in just in case it does). There could be 100s of these divs on the particular project listing page. Currently, I have the page setup so that if you click one of the projects, it's details come up in a modal dialog box. This functionality is fine per the requirements for my project but I'd like to add some "umph" to it by adding in an animation that does the following:
1) If you click on one of the projects, the box expands up to fill the parent container that contains all the projects
2) As the div grows to fill the space or when it's full sized, I want to expose the details of the project itself. Essentially, when the project is unselected, it's just a title/description showing. When it is selected, the project div goes full screen, exposes all of it's details, and shows it's editable fields in the full screen version of the div.
3) When the user closes that full screen div, I'd like it to go back to it's original state in it's original position.
I'm only using the latest version of Chrome for this project so it doesn't need to be a cross browser solution. I'd prefer to keep the animation as close to pure css as possible and would prefer to leave jquery out of it.
I currently have no experience with css3 animations but got a book on it that I hope can teach me about this eventually. However, I figured I would ask in the mean time in case someone can help me out soon so I can put this functionality in while still meeting my deadline for the functionality.
Thanks in advance!
Create a second CSS class that can be added to your div element when it is selected, and removed when it is not. Something like
div {
top: 100px;
bottom: 200px;
left: 100px;
right: 300px;
transition: all 1s; /* animate changes */
}
.active {
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
}
.content {
display: none; /* hide the content unless active */
}
.active .content {
display: block; /* show the content when .active class is added */
}
Make sure that the parent container fills the entire window and is itself set to positiion: absolute or position: relative. There will be a lot more details to work out as you go, but that should give you a framework to get started. You can then add or remove the .active class as needed with JavaScript.

Thumbnails from JS Gallery Placed in Footer

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.

Categories

Resources