So, the lightbox works on my page but it doesn't respond to any changes made in the stylesheet file, lightbox.css. Yet, when I remove reference to the file, the lightbox stops working, so it's clearly being called to.
In the page's code, the stylesheet is being called with:
<link href="../css_javascript/lightbox.css" rel="stylesheet">
And the jquery is being called with:
<script src="../css_javascript/lightbox-plus-jquery.js"></script>
Truly have no idea what to do from here. I'm really just trying to get rid of the Image # count, and calling to lightbox.option in the page's code doesn't work either.
Not sure what information is best needed to put me on a solution path.
Thanks!
If you want to hide the "image 1 of 4" text, it is not done in the CSS but in the javascript options for Lightbox.
Add this to your page after <script src="../css_javascript/lightbox-plus-jquery.js"></script>:
<script>
lightbox.option({
'showImageNumberLabel': false
})
</script>
Also, your Lightbox.css file is not loading the navigation images, the loading and close images used by the light box.
body:after {content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
display: none;
}
They need to be in a folder, images, one level up from your "css_javascript" folder.
Related
I'm getting a little confused by a CSS question I've got on a WP site I'm working on.
There's a theme installed which always includes a header class on each new page (.title-banner) and I want to hide this on this one specific page. I don't have access to the stylesheets so I just wanted to use CSS to hide the element on this one page, using display: none;, however it won't work if I put it within a tag directly on my page. If I apply the CSS in the inspect tool, it does however work.
Is there a way I can get this to register by using on-page CSS rather than within the stylesheet, as this isn't an option? I know display: none; and !important isn't ideal but I don't know any other way to achieve this.
You need to be more specific to override existing CSS.
You can add this to your theme, or by going to "Appearance > Customize > Additional CSS" from your wp-admin.
Replace the Page ID with the page ID of your page... You can find it by looking at the admin page ID, or inspecting the <body> tag. Wordpress puts the page-id-xxx class in the body of every page, allowing you to override specific CSS on a page by page basis.
/* Replace Page ID with your page id */
.page-id-336 .title-banner {
display: none;
}
Use this;
<script>
window.addEventListener("load", function(){
document.getElementsByClassName('class_of_your_element').style.display = 'none !important';
});
</script>
You should try Javascript. I think your CSS styles are getting overridden by some default ones.
Use this;
<script>
document.querySelector('.title-banner').style.display = 'none';
</script>
I have a pop up window for signing up for our mailing list. I need it to overlay everything. Currently the css menu sits on top of the pop up. The menu is 9999 on the z index. Where in the pop up code (see below) do I add z index info.
This is the code from Mail Chimp:
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L)
{
L.start({"baseUrl":"mc.us9.list-manage.com","uuid":"56eb37539d1e217bbc3a2ea22","lid":"d8e88803f2"})
})
</script>
You really need to post your HTML and CSS to get a definitive answer on this, but you can try the following:
Make sure your popup overlay has a classname or ID. For example:
<div id-"mailing-list-overlay">
mailing list form goes here...
</div>
Now try adding this CSS rule somewhere in your markup:
<style>
#mailing-list-overlay {
z-index: 10000 !important;
}
</style>
If that works, great! Now try removing the '!important' and see if that works. (Make sure your browser cache is cleared when you reload.) If that works, then try moving the css rule to the proper stylesheet.
If none of these things work, it's possible you have a different issue -- for example, the overlay might not be in the same layer stack as the content you want to overlay. But that would impossible to troubleshoot without being able to see a more complete picture of the HTML and CSS. I can help you if you post your code on pastebin or jsfiddle.
on my page i have a tree view which is loading nodes asynchronously before expanding. I can't figure out how to display standard "loading" gif while waiting for node to load. I understand that it's standard behavior, but it simply wont work. Probably it's some css issue..
My page references css like this:
<link href="Scripts/app/ext-4/resources/ext-theme-classic/ext-theme-classic-all-debug.css" rel="stylesheet" />
I know it's there because everything else is rendered correctly. In that css file is this class:
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif');
}
I'm certain that this class is used because if i put background-color: #ff0000; instead of background-image: url('images/tree/loading.gif');, the place where icon should appear gets red background. I understand that icon url should be set relative to css location, and it is. This is part of my file structure:
Scripts
app
ext-4
resources
ext-theme-classic
images
tree
loading.gif
ext-theme-classic-all-debug.css
Also, when i call that icon directly using img tag like this:
<img src="Scripts/app/ext-4/resources/ext-theme-classic/images/tree/loading.gif" />
loading icon is shown as expected.
Any ideas are much appreciated! Thanks!
EDIT: RESOLVED
I was able to figure out what was the problem. Since i was using custom icons for tree nodes (sorry for not mentioning that, i didn't think that was relevant), loading.gif was somehow showing underneath those icons. To resolve that, i changed
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif');
}
to
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif') !important;
}
Don't know what's going on, but for some reason my background image is not showing when linked in external style sheet.
Example1: (working)
<html>
<head>
...
</head>
<body style="background: url(images/image.jpg);">
...
</body>
</html>
Example2: (non-working - external css file)
body {
background: url(images/image.jpg);
}
The image is displays when/if I use the first example, but no image is displayed when I use the second one.
Any suggestions? Thank you in advanced...
The directory your external CSS file is stored in may be different from the directory of the page you are putting the inline styles on. You may need to start your path with a slash.
url(/images/image.jpg)
or perhaps go back a directory like
url(../images/image.jpg)
I have a messaging tool within the website I am currently working on. The idea is to have a header div and a details div (display="none") for each message.
Ideally, if javascript enabled, I have just the header showing and when the user clicks on it, the details div slide open.
This is fine but how should I work it if javascript is disabled? I was thinking of expanding all messages if disabled, but I don't want a flicker briefly when the page loads of all images open and, if javascript enabled, they collapse.
I'm using ASP.NET and was thinking of checking javascript status of the browser server side but i found out that it can't be done cleanly.
Any suggestions on how to achieve this?
One option is to place this in your head (after the defined styles):
<noscript>
<style type="text/css">
#mydivid {display: block;}
</style>
</noscript>
EDIT: Ive actually posted a better answer, which works off a correct default state.
Actually, the most semantically correct way that you could do this is to append another stylesheet to the head via javascript containing styles that will be implemented if javascript is enabled.
In your example, you will retain the default display for the elements in question.
Then you will create an additional stylesheet (js-enabled-styles.css for example), and place your display:none within that.
Then, in a script tag in your head you will append an additional stylesheet. Using jquery this would be:
$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />');
You are right the server can only tell you if the browser has JavaScript, it has no clue if it is enabled or not.
Things you can try is do not use onready or onload, just put the lines at the bottom of your JavaScript to hide the content. You might even want to place it directly after the elements on the page.
<div id="foo">
asdf
</div>
<script type="text/javascript">
jQuery("#foo").css("display","none");
</script>
One side note, sounds like you should be using a definition list instead of two divs. Would make probably more sense to a person using a screen reader.
I believe you're looking for the <noscript> tag.
You could achieve the result you describe in one of several ways, but here's a fairly straightforward one. Define your default style for the divs to be the following:
<style type="text/css">
div.details
{
display: none;
}
</style>
And after this style tag, use a noscript block to override the default (JavaScript enabled) style, as such:
<noscript>
<style type="text/css">
div.details
{
display: block;
}
</style>
</noscript>