I am building a simple single page application which contains some divs which I would like to fill with content from my wordpress website.
In order to do that, I am using ajax load and inserting the loaded content into my divs:
$('#my_div').load("https://example.com/page/")
The problem is that my application uses css from bootstrap which is different from the css from my wordpress website. However, because classes and IDs are identical, the css from the loaded page is replacing the css from my app.
How can I avoid that problem? I don't want to use iframes. Would it be possible to automatically rename every Class and ID name from the imported page so that it does not conflict?
I think the best way is to use get instead of load and replace the classes inside with replace if possible. In your case you can do like this:
$.get("https://example.com/page/", function(data) {
// replace classes
$("#my_div").replaceWith(data);
});
Related
I believe the following is not possible without javascript/jquery but still wanted to confirm as I am not good in css/html/jquery.
I would like to apply certain style to an element but only when a particular url is accessed in my website.
I am using asp.net so a single aspx page template can cater to a host of urls so I cannot write the style in the html of the template.
If I write this style in a css file and include it in the template it will get applied to all urls.
I can selectively load this css file through jquery but I do not want to involve jquery into this as much as possible.
I can also use a asp.net literal control and load the css based on the url from code-behind but then addition of new urls would involve a code change. Also it sounds very messy.
Currently I am applying this through javascript/jquery as below on document.ready
if (window.location.href.toLowerCase().indexOf("/some-url/") > 0)
{
$('#some-element-id').attr('style', 'display:none');
}
But this shows the element for a split of a second before disappearing.
A solution involving jquery/javascript but resolving the above issue will also help.
I hope I was able to explain it properly.
Please let me know if any clarification is required.
It is probably showing at first because it is rendered at least a bit before the page is loaded, so it is shown until the jQuery ready() function is called on page load.
I would think the easiest fix would be to hide the element by default, then show it if it is in the URL:
#some-element-id{
display:none;
}
if (window.location.href.toLowerCase().indexOf("/some-url/") < 0)
{
$('#some-element-id').attr('style', 'display:block');
}
if #some-element-id is on a separate page then
add some-class to your element
define that class in a new .css file
only import that new .css file on the page you want the style
applied to
The URL is not part of the DOM so there’s no element to be selected by the CSS.
As you say the only way you can apply the css in a specific URL is using javascript.
The recommendation I can tell you is use addClass instead to use
.attr('style', 'display:none');
Or if you need to add a lot of css you also can include or replace the a full file like:
$('head').append('<link rel="stylesheet" href="youStilefile.css" type="text/css" />');
I hope it's helps!
the best solution is separate your css styles by codes that generated from server (independent from client).
Also you can test below code instead of $('#some-element-id').attr('style', 'display:block');
$('#some-element-id').hide();
and please insure that your jq lib imported successfully.
I have a chat website using node js and angular, and I have made the login/signup and chat page using these. but the problem is, whenever I load the chat page it uses the style from the other pages, and basically acts like a different section of the same page, It also merges the login/signup together, which is ok, because they have the same style just different number of form boxes, I want to stop angular from merging the styles from the login/signup with the chat and have it use its own style.
All help would be very much apreciated, thanks in advance.
And as far as I have been told and know, there is nothing in my own code that is preventing this, it is only angular itself. strong textBy the way, As far as I know, certain things the body of the different pages cant be individually styled, and If I were to merge html's it would take a while and research and I dont really want to do so.
The idea of loading pages as partials is not loading its css and js files etc.
You need to have only one file as index.html and inside,
define <ui-view> tag this is where you have to load all your partials to, but not an entire page, having html tags and everything.
Take a look at this pattern to load all your partials into one file.
and then,
I highly recommend you check this web site out to set nodejs to set all the missing routes to your html file as well as defining your "/css", "/js" etc.
I have just merged these two working methods to make a very concrete restful application structure.
All you have to do to avoid this problem is to write your css with starting parent class. In this way your css will work only if you have parent element with specific class.
.signIn .button {
}
.chat .button {
}
Write it like this and the button in different elements will have different style
I am attempting to write a small script which will look at page URL and, based on what URL it sees, add a new class to an HTML element. More specifically, on this page:
http://pamaphilly.wpengine.com/volunteer/
I'm going to add a class for the active URL which will add an arrow marker to the appropriate left hand nav marker. I have tried this strategy: jQuery add class based on page URL and, when I used the script on a dummy page, it works fine. But when I try adding it to the Wordpress Template, nothing happens. I've tried adding the script at the bottom of the template file and just (as a test) embedding it in the php template. I'm guessing my failure relates to a Wordpress issues (probably a failure of knowledge on how to do this) but I would appreciate any guidance.
Thanks.
You need to include .slick before you can use it. (before script.js + in the same way you include your script.js file)
Why not do this with CSS and WordPress directly, and skip JavaScript?
You can use WordPress's body_class() function to dynamically add a class to the <body> of your page. Using CSS, you can then target your appropriate .volunteer .sidebar-member li via CSS.
Is it possible and how to do not apply css on specific web page?
For example, i have some div's on Master Page and some css for them
.header {...}
But i have also some page (Home page), which is different from all site-style.
So i don't want to appy css from Master Page and i don't want overwrite existing css rules like this :
#specific.header{...}
Maybe there is solution such as add new Master Page.
Is it good to add some css using JS before page is loaded?
Maybe you can try any of these options:
Wrap all your standard pages under a <div id="whatever">, except the specific page you want free of your general css. Then prefix your css rules with #whatever, so a {color:red;} would be #whatever a {color:red}
This approach is very easy using LESS, because there is no need of prefixing every rule, just wrap them inside #whatever { ALL YOUR RULES}
Dynamically loading of your css, via JS or your server logic if you are using any MVC flavoured framework.
I'm experimenting with the jQuery UI tab control, and have three tabs that each load a different page through AJAX. The pages that are loaded are complete html-pages, with their own Javascript and CSS.
Scripts that are inline in the html body are ok, so are CSS in the style-attribute on tags, but Javascript and CSS in the head of the loaded pages are not used at all.
How can I make use of the Javascript and CSS in the head of the loaded pages? Or do I have to include all CSS and Javascript in the page containing the tab control?
The AJAX load is going to filter out anything that's not in the body element. You can put the CSS/Javascript tags in the body and they will be added to your page, but I would avoid that if at all possible. If you're not careful, you'll end up including things multiple times.
I suggest putting the common stuff like jQuery itself, plugins, etc. on the page containing the tabs and only put tab-specific scripts on the bits that are loaded via AJAX. You'll need to be careful to manage ids -- they have to be globally unique, not unique within the tab. Sticking with classes may be a better way to handle this or preface your ids with the tab name. For CSS I would try to make it so the CSS applies to the entire page, including tabs, and load it with the page.
YMMV.
You could add this line in your head:
<link rel="stylesheet" id="yourid" type="text/css" />
and this after your ajax call:
document.getElementById('yourid').href='css/'+yourvariable+'.css';}
And you can do the same for scripts (change rel and type).