I am using an iframe and i have a tinymce UI button. When the button gets pushed i remove a stylesheet from the iframes head (and i add another stylesheet). This works.
On second button push i remove the formerly added stylesheet. This works.
But when i want to insert the stylesheet which i removed on first button push it does not work.
It looks like i am only allowed to insert a stylesheet which has never been loaded in the iframes head.
Does anyone know why that is?
Is there a workaround for this?
I had to change the function used to replace the stylesheet.
Formerly, i used
ed.dom.loadCSS( ed.settings.content_css );
to insert a stylesheet into the editor iframe head.
Main developer of moyxiecode spocke confirmed that loadCss only loads a stylesheet once (it several times in the past)
Using this jQuery code instead of the above code works like a charm:
$('#'+ed.id+'_ifr').contents().find('head').append('<link href="'+ed.settings.content_css+'" rel="stylesheet">');
Related
I am using the same style sheet for 2 pages (index.html & contact.html). All styling has been applied to index.html. Now I have copied and pasted the same code into contact.html, but have found that the new CSS styling I have tried to use will not apply to this page. The pathfile to the style.css sheet has not been changed. What I don't understand is why some of the styling is being applied from the other page but when trying to add new styling it does not?
Have you tried clearing your browser cache or going incognito/private browsing
Are you applying new styles using classes or ids? Id is unique, while classes are reusable. Also if you have inline styling it will override the stylesheet. Can you post your code as an example?
Well there can be a couple of reasons for this:
Make sure that your stylesheet is properly loading. I don't know if you are using in page styling or an external stylesheet but make sure that it actually exists there.
How can you do that? When you open the contact.html page in the browser, hit Ctrl + U if you are using windows or Command + U if you are using Mac. If it is an internal styling, you will be able to see the actual code there. If you are using an external stylesheet make sure that the <link> tag exists in the page. If it exists the right click on it and select Open file in a new tab. If you see can see the code in the next tab. It means that your styles are properly loading.
Make sure that your elements in the html page and stylesheet file have the same appropriate names. For example # of id's and . for classes.
If everything is okay then it can be a cache issue. Since browsers cache the static assets, you should consider refreshing the cache by Hard Reloading the page. How can you do that? It's simple, just hit Ctrl + Shift + R if you are using windows or Command + Shift + R if you are using Mac. If these keys don't work, just click and hold the reload button on the browser until it shows a dropdown. Then simply select Hard Reload.
In case it doesn't work, then send us a link to your webpage. I'm here to help you. Just let me now :-)
I have placed some custom HTML, CSS, and jQuery inside an HTML box in my google site. but as the page loads, the unformatted content shows for several seconds until the loading is complete. attempts to add the following:
html { visibility: hidden; }
and then turning it back on later in jQuery do not appear to work inside a Google site.
Does anyone have another suggestion?
I don't know if this works on a google site or not, but using
<body style='display:none;'>
and then in the jQuery document ready function place
$("body").show(); has worked for me.
For some reason using style on the body statement works faster than the CSS file even if the CSS file appears in the head section.
I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
I work as an intern on a website wich is actually protected with pass so I can't give you the link...
Anyway, I will ask the question and if you need some code I can give it.
So, there is a responsive design for the mobile made buy an external party which created the design/css. The responsive work correctly when I work with wampServer, and I resized the page with the ctrl+maj+m on firefox.
The actual problem is, when I put the same page on the server, the responsive don't work anymore... on firefox and on mobile phones.
I don't get how is that possible, so maybe someone encountered the same problem and has some tips?
Thank you
EDIT : There is ONE page which still works online, but I really don't get why, it has exactly the same code as the others... the 'responsive code' is included in each page at the top with the footer too (but this one is at the end of the page). Just the body changes on every page.
EDIT EDIT :
Here is the sample code. header.php, head.php, mainmenu.php.
EDIT OF THE MASTER EDIT :
Thanks Abdul-Rafay Shaikh.
Well, all of the css is imported in the import <link rel="stylesheet" href="assets/css/zz-all.css" type="text/css" />. Which is called in the head.php. The path is good, in fact it works in one page and not the others. I think I have to check, line by line, all of the code to find maybe an import that f***ed all up, or something like that.
Thanks for all your help anyway :)
Well I think the responsive template you are using maybe used javascript to actually make breakpoints and as you told us that the one page that is working when deployed on a real server has the responsive css in the footer. So my solution would be put the css of all the pages in the footer or check wether any js is actually making the breakpoint and put the CSS after that javascript.
The Second thing is the path's maybe your CSS that has the responsive code has their path defined preceding localhost/ or some thing like that check that.
Third if there is no javascript that is making your website responsive and its only css import your responsive CSS to the main stylesheet
In your main style sheet
#import url("responsive.css");
just to make sure that your responsive style sheet is loaded whenever your main style sheet is loaded.
I hope this solves the problem
I am developing a feature where I want to increase the size(width and height) of Facebook Like button which is getting rendere on my page.
I have tried overidding the css but it is not working as my css is loading very late.
Help required.
Are you sure you're using the correct overrides in your CSS? If I'm not mistaken, it doesn't matter when the CSS is loaded, just that it is loaded.
Be sure to check your CSS includes in the header file to make sure you're using the latest version. Also double check the classes or ids you need to override.
Perhaps you could post the code containing the like button you're trying to manipulate. If you're loading it in via Javascript you can use Firebug or other Web Inspectors to find out the actual HTML that gets inserted.
First of all, the css MUST be interpreted by the browser before the html element it refers to is loaded...
Second, the reason you can't select the button through CSS directly, is because it is rendered inside an iFrame that is controlled by the Facebook framework (you can check this out with firebug or any other inspector).
I'm not sure if it's feasible, but you have two possible ways to do it:
use javascript and the DOM to access inside that iFrame, select the button and style it.
create a button yourself, and give it the same href as the one generated originally, thus losing the fan-counter capabilities and whatever else is part of their framework