I'm working on a vertical tab section. Having linked each tab to it's content using different id's the links seems not working except for the one with the active class. The hover for the active class is also not working.
Related
In Wordpress plugin gallery "Everest Gallery" got some tabs which first display ALL pictures, and next according to the category assigned to a given photo. For example: ALL | GROUP 1 | GROUP 2.
Choosen tab is later displayed as "active" one.
What I need to get is to hide the tab responsible for ALL. Code of two tabs below when first is choosen as active and the second is inactive (there are two different classes in css):
<li>ALL</li>
<li>GROUP 1</li>
I figure out that I can hide ALL group using below code in custom css section:
[data-filter-key="all"] {display: none;}
And it works! The problem is that on the first look, gallery still display all the pictures before I click on any other GROUP tab. How to make eg. GROUP 1 with data-filter-key="h3MyESImhP" display as a default?
I'm not programmer, so I hope that everything here is explained correctly and clearly for you.
Thanks in advance!
Thats not a css question, there should be default setting in the Plugin. CSS has nothing to do with load data. You can only hide/show like the way you figured out.
If there is no config in the Plugin for that you have to change the php file in the Plugin, but after every update it will be overwritten.
My page is having grid which contain two tabs (tab sepaprtor). I need to make some color differentiate when clicked on tab a from tab b. Both the tabs are blue color and so when tab a is active I need to give some other color. A custom style sheet is being used on page on component level. I am unable to fin reference of this style. So other than changing style sheet, is any way to accomplish this. Al's howt check, which all components are attached to this style sheet.
For changing tab folder colors, you can use PSSTYLEDEF.
As you are changing grid tabs, use PSSTYLEDEF or the style sheet that is associated with the page definition in which the grid is located.
Note. The grid tab styles can be set for each grid individually using the grid properties. However, for page tabs, you can set the styles using only the default styles in the application style sheet.
You must access PSACTIVETAB, PSINACTIVETAB, and any other tab classes that your application uses (for example, PSLEVEL1GRIDACTIVETAB).
PSACTIVETAB
--->For folder tabs, open the `PSACTIVETAB` class by double-clicking the class name.
On the Background tab, select the color of the background of the active tab (matching the color of the tab image that you created).
Note: Use the drop-down list box to find the color or browse through the color choices.
PSINACTIVETAB
Do the same for the PSINACTIVETAB class (or any others that you need)
--->For folder tabs by double-clicking the class name and selecting the Background tab.
--->For grid tabs, access the style class that is associated with the grid tab.
As i don't have much rep. to paste image i just linked my study on stylesheet.
Refer it for more style classes
Grid tab level style classes
Is it possible to link to an Element Id within a container that already has an element id?
My setup is that I have Tabs which have an element id, we use this to link our customers to open this tab. Within the tabs, we have accordions. Basically it is a FAQ section for different types, and each type has a huge list of FAQS which we categorise.
Currently, we are able to link customers to #type1 but cannot link #type1#faq1.
What we are trying to achieve is to give the customer a HTML URL link which opens up a tab, then opens up the FAQ accordion which has for this example an element id of #faq1.
I have a registration form on my website, which forms a basic user employment resume. To save space on the page some of the form elements have the option to add more fields, now all of these work fine except for the Employment History section.
When you click on the add more button the form appears directly underneath as it should except for the first four fields:
Job Title
Company Name
From
To
which shift to the left.
I had this issue with all of the add more sections but fixed them as the person who built the page had made some mistakes. However i can not seem to find the issue, It feels like i have changed everything nut nothing makes a difference.
http://goo.gl/w4WYJm
You are missing to add the row class where you generate new elements in your javascript.
<div id='jobtitle"+intTextBox+"'>
should be
<div class="row" id='jobtitle"+intTextBox+"'>
You also have a problem which you will find after fixing this, that the descriptionbox has the row class. Fix this by removing it from the job-description and just apply it to the wrapper div as shown above.
I just checked your website and found the following things.
1) You are trying to show one div#jobtitle1 on clicking add more. I suggest that please add class="row" to that ( this is the class which you people are using for margin )
2) In the same div block which you are showing one more field called Job Description which is again inside a div which has class="row" ( which will again add margin because it is the child div of div#jobtitle ) . Please remove that class here.
Try these things then it will be fine.
I'm attempting to implement a multi-level drop-down navigation menu in CSS only but there's one small part which I just can't seem to get working correctly.
What should happen is:
1) When hovering over a menu item, it should be highlighted by using a different image (this works fine).
2) When hovering over a sub-menu item, the parent menu item should be highlighted.
Point 2 works fine up until I have a class .bottom on the parent menu item (this class is used as the image is slightly different). If the parent menu item has class .bottom, the highlight simply doesn't happen.
A demo of this can be viewed here: http://jsfiddle.net/cZFtW/2/
The demo shows that when hovering over Menu 1 > Sub Menu 3 > Sub Sub Menu X, Sub Menu 3 is highlighted. However, when hovering over Menu 2 > Sub Menu 3 > Sub Sub Menu X there is no highlight.
Can anyone see what I'm missing? On a side note, there's no real reason for not using Javascript here, I'd just prefer to have it all handled by CSS if possible (only need to support IE7+).
TL;DR; version: this fiddle shows the answer.
I understand what you mean. And I am pretty sure that the styling to which you need an answer to, which works for all except for the one at the bottom, has arisen purely by accident. (Kind a nice one I must say). I am almost certain of this, because your code as well as the file names lack any form of consistancy. There is double code, there is superfluous code, and there are images missing.
Therefore I have rewritten your markup and style sheet, and came to the fiddle as mentioned above.
Now, how does it work?
The trick is to attach the background image to an element inside the list item. In this case I chose for an anchor element, since that is most the likely. The first step is to change the background image at hovering the anchor, that's basic.
The second step is to change the background again when you hover over the submenu. At that point, the anchor element isn't hovered any more, but the list item is. So you can still change the background of the anchor element.
Note: in my solution there is a small difference to what you wish: when you hover the arrow, the background if the list item is already changed instead of until the cursor is over the submenu. If you want to prevent that, then you have to add an extra element for every sub menu like you had done yourself. But I think this is pretty nice also.