I really like what History has done with their show pages. Anyone know where I can find resources (or a name so I can google it) like what they have?
Example: http://www.history.com/shows/american-pickers where it says Full Episodes, History Pop Shop, etc.
You just need to make the image be visibility:hidden (with css) so that it maintains its space, and make it visibility:visible on hover of the container.
demo code: http://jsfiddle.net/gaby/hj4gH/2
You can put the detail popup inside the hover trigger, hide it, and show it in a CSS rule targeting a.Trigger:hover div.DetailPopup.
Related
I am currently using a squarespace template and am wondering how to inject a code that causes a rollover state change on my logo. All I want it to do is change to the neon green color that is a part of my theme when hovering over. The link to my website is www.henrykernsart.com
I have tried looking for a solution via squarespace and no one has helped me so far.
This can be accomplished using custom css. But, because squarespace templates tend to vary quite a bit, you will probably have to do a little research to figure it out.
There are a variety of ways to inject custom css into your squarespace site. I'll illustrate 2 of them.
Affecting your entire site - In your squarespace admin dashboard, go to Design -> Custom CSS. This will open a side panel with a large text box where you can enter css code.
Affecting just a single page - Open the page you want to be affected. In the hierarchy panel of pages, hover over your page and you will see the gear icon. Click on that to open the settings panel for the entire page. Click on the Advanced tab and this will open a text box for css code.
The code you will enter will be the same in either place, with a small modification for the single page option.
You will need to know what your template calls your logo. If you are lucky, your logo image will have it's own consistent id or unique class. (Looking at your site, you aren't lucky and yours doesn't.) We can use that id or class to directly affect the image.
Let's say your image class was "Header-branding-logo" (that's what mine is). Your code will look like this:
.Header-branding-logo:hover {
content: url(https://the-url-to-your-alternative-logo-hosted-on-squarespace);
}
That's if you are editing the css for the entire site. If you are doing page-specific editing in the advance tab you have to enclose it in <style></style>:
<style>
.Header-branding-logo:hover {
content: url(https://the-url-to-your-alternative-logo-hosted-on-squarespace);
}
</style>
If your logo has an id instead of a class, you can do the same, but instead of the class, you will use #id:
#block-a-bunch-of-id-numbers:hover{ ... }
If you aren't lucky enough to have your logo id'd, you will need to use a combination of Attribute Selectors and Complex Selectors.
First, find a valid, constant id or class. BTW, this is an id that does not start with "yui-" or "block_yui-". Don't use ids that start with those.
On your website's template, you have a class called "logo-image". That's probably a good place to start. Starting from there you 'describe' the path to your image.
.logo-image > a > img:hover{ ... }
Inside the <div> (marked with the 'logo-image' class) is an <a> and inside the <a> is your <img>. So that's the path.
How do you get that path? The easiest way for me is in chrome, right click on the logo image and choose "Inspect". That will open the inspector from which you can examine your site's structure.
If you can't find a good class or id, you have the option of using an Attribute Selector. Find a block somewhere above your image with a unique attribute. Something like
data-content-field="site-title"
You can use that attribute as your anchor point.
[data-content-field="site-title"] > div > a > img:hover { ... }
Lots of ways to accomplish the task. It's kind of fun to figure out. (Remember, stay away from those "yui-" ids!)
What actually happens when you hover the image is it swaps out the current code/image with new code/different image. That being said, in the css you need to specify the replacement. If the logo is a static image, I would recommend creating the logo using the hover color (in this case - neon green). Then set the hover event property to swap the default logo image with the hover image.
This link may help you with the :hover event property: w3schools - CSS :hover selector
I started building a site using a bootstrap template, but I'm having a hard time figuring out how to tweak the css. For example, a table might stretch across the entire page. But when I use F12 to look at the css, I don't see anything related to a width property anywhere around the table. Is there a better way to determine what css is being applied or inherited?
You can use the Google Chrome element inspector. Right click on a div or any other page element, and then click "Inspect Element". From there you can view the CSS that is being applied to a specific element.
Check out this Chrome plugin called SnappySnippet. (Also, prepare to be amazed)
Have a look inside bootstrap.css file , there should be plenty of code and not every element has it's own separate css , some elements are defined together
If you use google dev tools (F12), the navigation tab will let you click on "Resources." When you click that, you can look at the scripts, stylesheets, see a list of images used, etc...
if you click the "magnifying glass" in Google dev tools (F12), you can hover over any element on the page. Click that element and on the right side, the CSS will be displayed. Usually the stylesheet is called out inside the css.
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
How can I edit the styling of these part of google +1 button? kinda hard for me to explain the detail in english. so I make this picture
I know it's located inside an iframe, some says that we couldn't edit the styles inside an iframe which sourced from other domain. but apparently, I have successfully styled my facebook like button to be looking good (transparent on the border). And also, I saw some other sites which have a nice looking google +1 button (without those blocking solid white background)
Edit: possible solution:
Looking at the markup and css on the page below it looks like somewhere in your css you must be setting the background-color of the div that the bubble is contained in to white or #fff. Try something like:-
.pls-container {background-color:transparent}
Do you have a link to this page, or a site that has a +1 button which has the same rollover so people can experiment? It would be easier to give a definite solution then...
Edit: just had a look here at the +1 buttons (at the top of the post and in the sidebar at the right) these both appear to be transparent borders - so there must be something different about your page. You could try looking at that page as an example and see where you've gone wrong, but without the code to your page it will be very difficult to give a solution to your problem directly.
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)