Wonder if anyone can give some advice.
Bascially this is something I come across from time to time - I'm learning to debug using firebug and trying to track down where a style attribute is being set in a complex bunch of wordpress/fancy box files.
Bascially I'm trying to get fancybox to autosize to width of element, I know the fancybox option to enable this, but the whole box seems to be overriding with a fixed width, which i can't find anywhere in the stylesheets.
element.style {
border-width:10px;
height:84px;
width:987px;
Now, this doesn't have a style sheet associated on the right hand side in firebug, so I'm assuming this means its computed on the fly somewhere in the js/php ?
What I'm after is a pointer on how to track down where it's being set, and how I can maybe use firebug to identify that if it's being set outside the stylesheets? it's so I can be a better debugger too :) thanks for looking.
in mozilla browser using firebug click on arrow icon at (left top corner) and select any control on page. it will display their style(css) at right side. here you can made any changes and it will display at browser.
think it will helpful for you.
When element.style is specified as the origin of the style information, it means that the style is inline (i.e. specified as an attribute to the tag).
E.g.
<div style='border-width:10px;height:84px;width:987px;>This is a box</div>
If you can't see that in the source code, it's possible it's been added in by some javascript
Using the web-developer addon for Firefox, you can not only view the source, you can view the generated source which will give you the source after any javascript has acted on it.
First locate the element
Once you do this, trigger the event, you will see the change
Related
I just started working on a Wordpress theme, but it won't reload the stylesheet after I update. I searched throughout here and tried the common remedies, including:
Reload holding ctrl/shift
Reload while Developer Tools is open
Reload twice quickly in a row
Get firefox/firebug
Add the timestamp generator to the end of the href
Install an extension, specifically this one: https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?utm_source=chrome-app-launcher-info-dialog\
It seems like it only reloads every once in a while, and it really impedes my ability to write CSS...
Does anyone here have any ideas to fix this?
Thanks.
edit: I think it may have something to do with my host (it's free). I'm just going to move offline for development, I think.
You can always go into Incognito which does not use any chached data. It also does not save any history information.
To use it you can press Crtl+Shift+N then navigate to the page / website that you want to see.
You can also access Incognito by pressing the ☰ icon in the top right of your chrome window and click on New incognito window:
If your page is still not updating I would make sure that the file is even being saved. Because at this point your issue would not be because of files being cached..
My only other thought is that it could be your CSS itself... Sometimes your CSS is not applied due to an error in your code, another piece of code counteracting it, etc...
So see what is being applied:
press F12
OR
right click somewhere on your page and press Inspect Element.
You should see something like this (except with your code / webpage):
The parts of the "Inspect Element" will be sized slightly different but you can change those around...
Essentially click on the html element that you are trying to change the css on...
You will now see what css elements are being displayed... If they are crossed out, it most likely means that there is some other parent (or just some other property) that is canceling out the css you are adding.
These are just some of the reasons why the CSS may not be working! But I hope this helps!
When working with child theme, make sure you are loading the right css file. Sometimes you load the parent's css file.
Make sure to disable cache plugin in development time.
I want to remove URL from page at printing time with PHP is there any way to do this? Actually I don't want to push my clients to change their browser's settings at printing time.
Any help really appreciated!
That is a browser setting, unfortunately you can't change it and it sucks.
Only workaround that I can think of is that you serve PDF file which could be displayed inline if user has PDF plugins installed. In that case you have full control of content and user can print it.
No. As per my knowledge.
The web-page url that gets displayed while printing a web page is a feature added by a broswers, and hence it can't be done through php as it is completely server-side scripting.
Also, I guess this can't be done using javascript, as said before "This is a feature of browsers" and javascript can be used to manilulate the dom of the page only.
I guess you cant do such thing.
You cant change in browser defaults like printer settings, margins, or any other browser setting, temporarily or permanently, from CSS or JavaScript.
There is a #page directive in css that enables some formatting that applies only to paged media (like paper). Refer link. But problem is this does not work in Firefox, Google Chrome, but it works in IE 8 and Opera 10.
Programmatically, you can't control this and it does suck. There are options that control this are part of the specific browser. Therefore, each user would have to change their browser settings to remove the URL from printing. Unfortunate, I know, but the browsers don't let you have that much control over them. One way to get around this is to generate a PDF document for printing. Any document that is downloaded and printed from the client machine rather than from within the browser will not have this problem.
Also, you may have a look at Prevent Firefox or Internet Explorer from Printing the URL on Every Page
Change Firefox setting
Go to file->page setup -> Margins Header & Footer and set --blank-- what you need.
See more here
Maybe you can try to use CSS properties like "#page", "#top-left", ...
For example:
#page {
#top-left {
content: "";
}
}
I found this example on W3C website : http://www.w3.org/TR/css3-page/
I am working on a page and having problem with the Fancybox close action for the Image gallery in the first button at the bottom, the gallery is closed but overaly is still there. Here is the test link
How ever the same settings are working for the second link "Floor Plan".
Secondly I am using a Tiny Scrollbar plugin for the gallery on the page. The thumbs on the left side have blue scroll bar if they are larger in contents. This scroll bar does not appear in Google Chrome, and sometime don't show up even in other browser if the page loads first time, then I have to refresh the page to show it. Any idea about the problem will be greatly helpful.
Thank you!
First off, I noticed you're suing jQuery 1.3, why?
Here's 1.6:
http://jquery.com/
It isn't that much larger, and its an updated library. That may fix your problem.
If that didn't work, then delete the fancybox.js, re-downlod and put it in again, same with css. Make sure the css is called at the end of your css document.
If that doesn't work, I suggest getting rid of your javascript files one by one until there is only fnaycbo xleft, it's obviously some conflicting code at this point, so you'll have to troubleshoot by trial and error, going through one by one to findout what script is preventing close. I don't have access to your server, so I can't test it.
It's most likely in main.js, so remove that first, and see if fancybox works then!
ETA: Scrollbar fix.
The problem is something is adding a disabled selector, it's javascript. But you could change up tinyscrollbar.js to fix it, or you could go to your css, find the line:
'#scrollbar1 .disable {display:none}
and remove that line entirley, it's causing your scrollbar not to appear in browsers the javascript is (for some reason) disabling in.
In my case I solved with the next modification:
$(document).bind("load", function() { $('#myTinyScrollbar').tinyscrollbar(); });
Well you have an error in console:
d.onClosed is not a function
It could be because:
Your using an old version of jQuery possibly not supported by Fancybox. Try updating to 1.6, though beware legacy plugins or code that could break due to the steep upgrade.
A compression issue. It's possible i.e. the Google Closure could of removed what it saw as "unneeded" code and therefore broke the functionality. Try using uncompressed Fancybox to see if it fixes it, if it does then you know this the issue, rather than your jQuery version.
I have wordpress installed on my system. I am using twentyten theme, in the theme directory there is style.css file. In that file I tried
body {
background-color: red;
}
but nothing happens, no matter what change in style.css it does not reflects in browser.
Please help.
Have you cleared your browser's cache? Often the browser will cache the css files to be more efficient, so any changes you make to it require you to clear the cache.
If you're using a windows machine: ctrl + shift + del should bring up the clear cache dialog
Edit: it appears that your css was in the #media print section of the stylesheet - which only applies to printed material
The best way to figure this stuff out is to install Firebug in Firefox or use the built-in Inspector in Chrome.
Right-click on the page, do 'Inspect Element' and check what the Inspector tells you. Probably the background-color you're setting is being overruled by another style rule (Inspector will tell you this) or there are other elements with another background-color which are placed on top of the body, thus hiding the red background-color.
Either way, doing an 'Inspect Element' will make this clear. We can only guess from here.
First of all ensure that you're editing the right style sheet. For example try to erase all the styling code inside this file and refresh your website. If you loose your style then you're in the right place.
Second try to use Firebug Addon it will help you to inspect the html Element then you can show the corresponding CSS for this element. you can change whatever you want and see the effects directly on your page then you can write these changes to the style sheet.
hope it helps you.
Maybe that style is overwritten by another background attribute on the body a few lines below (browser will always render the last css attributes of elements). Something you can check easily with firebug.
If you have plugins, disable them just to be sure.
Other then that and the suggestions already made I'm not entirely sure what could cause this
I have my site and it looks great on FF, SF, IE8 but on google chrome it shows a blank page, but if you click on view source, it is there !!
on js console I got "Failed to load resource".
Also I have the same site on my localhost and it works great on chrome !!
My site: http://grupooak.com
take a look on chrome and if you know how to fix it , or a tool to debug it and find the issue lmk :)
Thanks !!
btw the site was developed on php (akelos framework)
Sometimes, if you try several times you can get the page, but it gets stock if you click on any link
You need to make sure the DOM is valid, as your html seems messy I would advise you to fix the following errors:
http://validator.w3.org/check?uri=http://grupooak.com/app/%3Fak%3D/account/sign_in/&charset=(detect+automatically)&doctype=Inline&group=0
Just a thought but try loading the page without any javascript files, and if the page loads, add one back in a t a time testing if it still loads, when you add the javascript back in and the page fails to load, let us know what that file is.
Its could be one of the following:
Your server is failing to respond to the call, unlikely
there is a memory leak in the javascript files, causing the brows to focus on the file which does not continue to load the file.
Reasons for this is if you go to the url: view-source:http://grupooak.com/app/?ak=/account/sign_in/ in Google Chrome, you will see the whole response, meaning that it is something that is loaded into the browser that's the issue.
If you inspect the element of the page you will see that it stops loading loading the page after the first javascript include, try UPDATING Your Libraries versions.
Have you tried disabling caching and/or output encoding?
Something similar happened to me before, and it was related to the Mime type.
If that's the case, take a look at this article: http://www.dyeager.org/post/2009/01/php-xhtml-mime-type-caching
maybe fix this tag.
<img style="width: 95px; height: 113px;" src="/app/images/homepage10.jpg"
also look at the developer tools in chrome they will point you to this error
/app/?ak=/account/sign_in/ Failed to load resource
info about developer tools
http://code.google.com/chrome/devtools/docs/overview.html
First of all you should have a look at the W3C's HTML validator output, correct all of the errors, and try again. I guess that it will solve your issues with Chrome.
When I inspect the computed styles in chrome, the html element's height is 0. This might explain why the page is blank.
It's your rotator script. The first argument must be a beforeLoad event object.