Wordpress and Accordions, nothing works now - javascript

I am quite stumped. I am not sure what I could have done to break the accordion function in either the Accordion Shortcode plugin nor the CSS Accordion code I just tried. Mostly I need to understand how to troubleshoot these so I am throwing my self at your mercy so I can help get this site back to proper functionality.
First, the page with the Accordion Shortcode: http://londoncapital.biz/partners/global/
I was using Symple Shortcode plugin till I had to reinstall the site then that plugin stopped working. I suspect this was related to the WP3.7.1 upgrade but I cannot be sure. So I decided to just find another plugin that did work and the Accordion Plugin worked and looked better for the site so I was happy. At some point, while going through and fixing some of the oddball issues that popped up after the reinstall (weird spaces that somehow were being generated from the restored backup) and the Better WP Security plugin being overzealous in its protection, I was happy with the Accordion Shortcode plugin. Then...it stopped working. Because I could not track down what I had possibly done I decided to look into an alternative accordion and found a CSS version. Thought that was perfect and would get away from any plugin incompatibility but alas this too has failed. It currently collapsed and it will not expand.
CSS Accordion page: londoncapital. biz /test-home
I followed this site: http://www.hongkiat.com/blog/css-content-accordion/ and referenced the CSS file like so:
#import url("../onyx/accordion.css");
I suspect there is a simple answer but damned if I can figure it out. Thank you for any efforts in advance!
This file is sitting in the same directory as the normal style.css (style4.css for this template to be exact).

Your Section ID's are missing as required to trigger the target.Though you added ID's to Anchor tag.
Demo : <section id="#about">...</section> http://jsfiddle.net/dhanith/7y7mY/

Following on from my comment above: you've solved one problem by adding the IDs, but there's now another problem. You've swapped the sections in the HTML for div, but you haven't changed the CSS to match. Change all the instances of .accordion section to .accordion div like so:
.accordion section:target { ... }
.accordion section:target:hover { ... }
.accordion section:target h2 { ... }
.accordion section:target h2 a { ...}
to
.accordion div:target { ... }
.accordion div:target:hover { ... }
.accordion div:target h2 { ... }
.accordion div:target h2 a { ...}
You'll also need to do the same for .horizontal section and .vertical section. See this JSFiddle to see it in action

Related

How to hide this button using JavaScript?

We are using a .Net web application from a vendor. It has a feature for user to enter JavaScript and CSS for performing some simple UI modification. They are executed when loading the application.
We want to hide a button on the web UI temporary.
In F12 developer tools, we found the id for that button.
We used this CSS script to hide the button and it works.
#ext-gen391 {
display: none !important;}
However, the id is not fixed. It changes with different groups of login users. So that CSS script is not good enough.
I am thinking of using JavaScript but not sure how to start. Can someone help?
Edit:
Thanks everyone for the input. Sorry that I did not mention that other buttons have the id starts with ext-gen too.
It seems to me that the only "unique identity" I can refer to is the button's position.
How to hide that 3rd td element? Take note that the id ext-gen391 is not fixed. It will be different for different groups of login users.
First off that small snippet of CSS you have tries to select the button based on a class not an Id. Which is why it doesn't work.
You could use CSS
[id^=ext-gen] {
display: none !important;
}
or jQuery
$('[id^=ext-gen]').hide();
but, really, the best way if you have control over what gets rendered you should try and add a more unique id/class instead.
You could try using an id matcher like this in the css:
*[id^="ext-gen"] {
}
To select all the HTML elements that ahve an id that starts with ext-gen.
This should work:
td.x-toolbar-cell[id^=ext-gen]{
display: none !important;
}
if only the number changes, see attribute selectors for more info.
try you use css class name to do that.
You could solve it by putting your Open link inside the #show div
JSFiddle
HTML
<div id="show">
Open
<div id="content">
some text...
Close
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
This solution was used here.
Congratulations #Mathias

Remove swipe away for mobile nav from Jekyll Theme (Sera)

I am trying to remove a nagging feature from a Jekyll theme I am using. The theme is called Sera by Gleesik. In essence, the mobile nabber is toggled by hitting the hamburger, the navbar pops in, and the hamburger turns into an X which can be used to close the navbar. However, it seems there is some CSS or JS that also enables the navbar to be swiped away, this is problematic because I have a rather large navbar now, and so when a user (on a phone) tries to scroll they sometimes cause the navbar to swipe to close. While it is a neat feature, I can live with only the X providing the close functionality.
Link to live preview of the theme - need to use it as mobile to see what I'm talking about
Also, I've not pasted in the CSS as even the scss file for header-responsive is too large for here. I understand this isn't the best question for here, but I am totally stuck. Even if someone could point me towards a css or js feature that does what I describe above, that would be a tremendous help since I don't even know what I am looking for.
On discussion with a friend he suggested I paste this JS from the project:
// Close Mobile Menu
$nav_menu.removeClass('active');
$toggle_menu_button.removeClass('active');
$body.removeClass('no-scroll');
});
// Toggle Mobile Menu
$toggle_menu_button.on('click', function() {
$nav_menu.toggleClass('active');
$body.toggleClass('no-scroll');
$(this).toggleClass('active');
});
Reurning yet again with some CSS this time, I've isolated the following.
// No Scroll - Lock body scrolling.
&.no-scroll {
height: 100vh;
overflow-y: hidden;
.site-header .container {
&:before {
width: auto;
height: auto;
background-color: $black-transparent;
}
}
}
Edit: Not really an answer, but this is what I did, I removed the following which was found down the page:
$window.on('resize', function() {
$nav_menu.removeClass('active');
$body.removeClass('no-scroll');
$toggle_menu_button.removeClass('active');
});
Good enough I guess, kinda bummed that iOS seems to break standards w/r/t this issue. Maybe I'm totally off base, who knows.
Thank You.

jQuery/CSS - Whole Div Clickable, on hover activate a tag hover state

I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output
In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}
As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}
For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.

Menu not displaying with Superfish HTML and CSS

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.

Tumblr: How to control CSS with post tagging (UPDATE: Working Method without JQuery!)

Seen this done before, am curious as to how it is done. Example can be found over at http://wordographic.info/
For example, if I tag a post blue, the bg-color of the post turns blue, etc.
Anyone know how this is done?
Thanks.
Found a way to do this with only HTML/CSS. Pretty simple, just add the {Tag} block to any div class wrapping the post area but make sure it's between {block:Posts} and {block:Text} etc. Now whatever you tag a post now becomes a new class.
{block:Posts}
{block:Text}
<div class="post {block:HasTags}{block:Tags}{Tag} {/block:Tags}{/block:HasTags}">
{block:Title}<h2>{Title}</h2>{/block:Title}
<p>{Body}</p>
</div>
{/block:Text}
{/block:Posts}
Pay attention to the third line down. it is important to add a space after {Tag} otherwise they won't be seperated in the HTML.
The CSS would look like this:
.post { /* default style */
background: #ccc;
float: left;
margin: 10px;
position: relative;
}
.blue { /* when tagged blue, use this style */
background: blue !important;
}
Works! Pretty simple, no jquery required!
Thanks Blender, wouldn't have thought of this for some reason if I didn't read your jquery method :)
With jQuery, anything's possible! This isn't going to work right away, so tweak it for your theme:
$('.post-class .tag-container .tag').each(function() {
$(this).closest('.post-class').addClass($(this).text());
});
It is nothing to do with JS, such things are done on server-side. Depends on tags some properties are set to posts and then they are taken into consideration while rendering them to HTML.
You want to get the post's tags as class names so you can style posts with CSS, and there is a variable you can use for this purpose. In your template simply use {TagsAsClasses}. This will render HTML friendly class names.
An HTML class-attribute friendly list of the post's tags.
Example: "humor office new_york_city"
For detailed explanation see Post chapter in Tumblr docs.

Categories

Resources