I am trying to program a TAB based paging.
My problem is each Tab contains a different background, so when I click on the hyperlink, the new background DOES NOT load, BUT the content loads.
Any ideas?
Code here
http://jsfiddle.net/rgarimella/AnBEc/1/
Tested your jsfiddle, adding !important to your css rules does the trick: http://jsfiddle.net/AnBEc/2/
Edit:
Depending on what effect you are looking for you could also remove the .ui-content part of each rule (so that it's just #services) that would apply the background to the whole page and not just the content part: http://jsfiddle.net/AnBEc/3/
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 can't figure out this issue and I have tried looking this up and it is hard to find any one with this scenario. I am using a master page with two content pages. The first content page is default.aspx, of course. The master page has a png that is a banner. This has a rule that makes it responsive in a separate CSS file. This works fine.
For the first content page, I have three buttons that are styled using CSS ( they are custom buttons I made in a vector graphics program that change appearance when they are pressed, all using CSS ) and they are responsive. There is also a listbox that is styled and responsive with CSS.
The layout of the default page is like this: Two div containers: one that floats left and one that floats right. CSS is used to make these containers responsive. In the right div, I have my buttons and they are enclosed in their own divs. So .. and so on. Of course, the listbox is handled the same way with a div that encloses that as well.
Moving on to the second page, I have the same basic structure as the default page. My intention is to have in the right div an image, followed by a text box, then an image, and a text box. The left div will contain the same content that the default page has.
At this point, I have added to the second content page the list box and the CSS is working as expected. The list box looks just like it did on the default page and is responsive as well. So the CSS is working. For the first image, I need a new CSS rule. So I go to my CSS rule and add a new rule .image{ width: 100%; height: auto; } and then I add my image and set it up with the class reference and the image. It does not work. This image is in it's own div. If I change the class of the image to another class that was created previously, the image is responsive. So I can use the banner CSS rule and the image is responsive, I can use the button CSS rules and the image is responsive, it behaves like a button ( clicking on it makes it change its appearance, that kind of thing ), I can even add the rules for the list box and the image is responsive. If I then go back and try to use the rule for image, it doesn't work anymore.
Any ideas on what is going on. It is not making any sense what so ever. I added the rule to the CSS file just like I did with all the other rules but for some reason, this rule is not working at all.
Thank you guys for any help. I can post code if you guys need it, but I don't see how that would help. My image for the second content page is identical to how I did the banner and the rules for the banner and the image are virtually identical, except percentages are different. This is just super weird.
To improve the performance, browsers save the css files in their cache and use their cache. If they don't do that, the browser has to keep loading the css file every time a page is using the css file.
If you clear your browser cache, you will notice that the new style gets applied.
If you are developing commercial software, you probably don't want to tell every user to clear their browser cache and you prefer to force the browser to load the new css file. On the other hand, once the css is loaded you would like the browser to cache it, because it will improve the performance.
There is a trick to achieve that!
Let's say your style file is called mystyle.css and you have a link to the style file in your web site like this:
<link rel="stylesheet" type="text/css" href="~/mystyle.css">
To force the browser to load the file again, you need to change link and the standard practice is to use a parameter in the url (usually a version number).
like this:
<link rel="stylesheet" type="text/css" href="~/mystyle.css?version=1.00">
Your style file is going to ignore that version parameter but the browser will notice a change in the link and will load the new style file. Basically, the browser stores the link to the file and if you change the version number, since the link does not match with what your browser has in its cache, it will force the browser to load the file again.
I have a div and apply the latest version of tinymce (4.2.5) to it, including some of my websites stylesheets.
When I use the editor old fashioned way the loaded css is only applied to the div I'm attaching tinymce to. Like a charm.
But I want to use the inline: true option. When I use that all the css is applied to the complete page of the application, not only the div.
Is this expected behavior? Or should I look for another approach? My main reason to use the inline feature is that it keeps the toolbar visible on scrolling. Unfortunately tinymce loads different sets of html for the inline and fixed toolbar (for example, the menu bar and icon/tool bar are separate div's. On inline they have a parent div) so just applying the same or similar css isn't working out.
Anybody has any tips or tricks for me? Or should I accept the limitations of one or the other?
You will have to accept the limitations.
Both editor modes need different css for the UI and in inline mode it seems to be necessary to apply it to the complete page (even though you don't like that).
I've been looking for ages with no luck. Our e-commerce site has application links in a lookup table to a detail table containing info & shopping cart buttons. In browsers where it works, "focus" sort of does the job (on the anchor cell at least), but I need ideas on how to have the entire link target row change background color or text color. The site is www.maxrules.com, an outboard motor parts supplier. "http://maxrules.com/fixomcsealkit.html" is one page with the basic idea. Click one of the part number links to the detail chart. I need the target line to somehow differ from the rest so customers are sure to get the right one. This probably involves js as well but not sure which forum to post in. This seem more appropriate.
CSS has the :target selector for this
:target { color: red;}
It's however not supported by IE 6-8. For it to work on IE you need JS. Something like
<a href="#name" onclick="document.getElementById(this.href.substr(1)).className='target';">
than in CSS use
.target {color: red;}
Only downside is that this script doesn't remove the class if some other link is clicked, so you can end up with multiple products with red color. Can be fixed with some more JS, but I leave to up to you
PS. in case of the maxrules site, you don't need the empty <a> elements, you can just add id="1212" to the <tr> element. This also fixes that currently the top part of the part is clipped, when clicking on a link.
I am working on a web application that has a menu across the top of every page with sub menus that drop down when a menu item is hovered over. This works fine, except on one page where we are trying to show a pdf in an iframe. The hover menus all end up behind the iframe in this one case. I have tried adjusting the z-index of both the hover menu and the iframe but neither seems to work. This is occurring in both FireFox 3.5 and IE8 so far.
There are two ways my question could be solved. I can either find a way to accurately adjust the CSS so my menu appears in front of the iframe or if there is another way to show the pdf that doesn't have this issue I could do that too.
Thanks!
When I ran into this issue, I used jQuery to detach the iframe before showing the overlay (and in my case a modal too). Once the user was done with the modal/overlay, I reattached the iframe to the DOM. _viewerFrame and _viewerDiv are just some css selectors of course. In my case there was a wrapping div tag around the iframe element that made detaching and attaching easy.
// detach iframe
_frame = $(_viewerFrame).detach();
function reattach(frame) {
// append it back to the div it was in (reattaching essentially)
$(_viewerDiv).append(frame);
setButtonStates();
setViewerState();
}
function onOk() {
... // other code
reattach(_frame);
}
function onCancel() {
... // other code
reattach(_frame);
}
// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...
Hope that helps...
This is likely because PDFs are displayed in a plugin, rather than natively in the web browser. CSS will not have an effect on this, because CSS only applies to content rendered in the web browser. Google does have a system that converts PDFs to HTML for display in browsers, at which point there would be no z-index issues, but some formatting may be lost in the process, and of course it is no longer a PDF document. Unless there is some way to tell the PDF plugin itself to lower its z-index (and consider that not all users will be using the Adobe plugin, some may use Foxit or other programs) you may be out of luck.
Try position:relative and z-index adjustment to get it in front of the iframe.
You're showing a pdf in an iframe? I'm guessing it has some sort of flash viewer? If so, then make sure you set the wmode of the flash embed code appropriately.
http://kb2.adobe.com/cps/155/tn_15523.html