I am creating a small screen plugin that any user can implement on your website. It is similar to those chat rooms like Zopim and tawk.to, where the user takes a certain code javascript and paste on the website importing a box screen.
In my case, I am taking some precautions as:
Creating divs with unlikely names of someone using (id="____Plug___Box")
All the css of sub-divs, must first call the previous div and then the current div #___Plug___Box #BoxInside
But why am I doing this? because I have a little fear of an external CSS affect my plugin.
In my case I say to the user to implement my javascript code always in the bottom of the page (to stay away from that kind of thing), I'm doing the right way? Is there anything else I should implement in my code to prevent any interference of external CSS?
In the case of Zopim he seems to use css-inline, it would be a good thing?
User always can overwrite your code. But you can provide random id prefix and create all elements from js side. Also using inline CSS will help.
var idPrefix = 'myPl'+(Math.rand() * 1000);
$('<div/>', {
style: 'color: red;',
id: idPrefix+'-wrapper',
html: $('<span/>', {'class': idPrefix+'-header'})
});
I suggest using core classes for js manipulation and supporting classes for display that can be overwritten.
<span class="myPl-js-click-for-action myPl-css-color-red">Click this red text</span>
Related
I am here to ask a couple of questions if I may.
I understand that the CSS is for styling, I have some method which works to a degree i.e text changing but this seems to be limited.
I have about 600 html pages that have some exact content on the pages.
I would have liked to be able to have a CSS or text doc which can be altered to change all html pages in one hit.
Though I am limited to html and css only, other options are not available to me.
I would one like to change blocks of text that is some volume, and images if possible, so I don't have to redo every page as it's very time consuming.
The other issue it needs to be cross browser compatible.
I know there are some great minds out there, I am willing to give any of them a go...
You should be able to use the css rule, "content: <desiredTextOrAttribute>"
https://www.w3schools.com/cssref/pr_gen_content.asp
Suppose you want to be able to set the title on all 600 pages to Company X:
HTML:
<div class="companyName"/>
CSS:
.companyName:after {
content: "Company X"
}
Here is a fiddle: https://jsfiddle.net/onm30rdn/1/
Of course, you won't be able to dynamically change this, and I think Javascript would be a way better solution in general. But this will work.
Assuming you can make your own custom stylesheets with css, you might get some love from pseudo-elements, such as ::before and ::after.
https://www.w3schools.com/css/css_pseudo_elements.asp
Basic idea is that if you can select an html element reliably, you can make a virtual element next to it for the browser to display. The code below would append "hello" before the existing text.
HTML
<body>
<p class="foo">World</p>
</body>
CSS
.foo::before {
content:"Hello ";
}
Result
Hello world
I want to create a tool as shown here where the user is able to change the style of the webpage dynamically.
I've searched around but am still not entirely sure on how I could do this.
Any direction on where to look to achieve something like this would be very appreciated!
First you need to create some way for the user to select the colour they want to use in the interface, and then store that value in a string, for example "userColour". You need to make sure it's a valid CSS colour value, so either '#33aa55' or 'green' (check the CSS reference for named colours which would be easier for you to implement).
If you define the HTML of the page using classes or IDs on the divs and spans etc. that the page is made up of, like this:
<div class="myColour"> your content </div>
or
<div id="myColour"> your content </div>
Then you can use Javascript to change the css attributes like this:
document.getElementsByClassName("myColour").style.background-color = userColour;
or
document.getElementById("myColour").style.background-color = userColour;
For class and id respectively.
You could also use something like jQuery which would give you much better browser compatibility and ease of DOM manipulation to apply styles to your markup dynamically, but the principles are the same.
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
UPDATE Support for this feature has been dropped. Please seek other options
Original Post:
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
The basic idea is
<div>
<style scoped>
#import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
One alternative would be to use an iframe.
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:
div#foo{
//All your css
}
And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like #media queries and so on.
While writing this, the <style scoped> is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
A simple way is adding pre-class before all selector in css file.
I find a grunt script can do this:
https://github.com/ericf/grunt-css-selectors
This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id
.parent{
// copy paste here
}
Example
Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.
I had a similar issue and found that Shadow DOMÂ can solve it easily.
let output = d.querySelector('#output')
let shadow = output.attachShadow({
mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTMLÂ content and style injected
Source
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
I am working with the Google Engine for a class, and I had a question about css tabbed menus. I found a tutorial for tabbed menus, here is the link to that one if it matters:
http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
I was wondering if anyone knew of a way to make it so that it didn't have to reload the page every time I click a link in the menu. Basically have it already have the info in memory and change just the text, or only refresh a specific part of the page. I have no idea what types of stuff you might need, but I basically copied that code exactly, and used the app engine and template inheritance to get the different page info. Let me know if you need other info. Thanks in advance.
WWaldo
I can suggest at least two possibilities using JavaScript; you could either target the links in your CSS menu items towards:
Altering the content (e.g., the value of the src attribute) of a main iframe element (for example), or revealing/replacing preloaded content into/out of div element(s); and/or,
Trigger an AJAX call to a server to determine an update, and update the contents of the required components (e.g., div) dynamically.
The difference is pre-loading all the page content first (1) as opposed to accessing it dynamically on command (2). If you don't have control over a server to implement AJAX in suggestion (2), then (1) will suffice, but at the cost of offloading the work (and downloads) to the client.
Both approaches will require dynamic update of page contents using JavaScript. The 'net is littered with examples of this; check out this one, for instance.
It is actually quite easy to make a tabbed menu in HTML, with CSS, javascript is not needed for my design. I did this example in about 1/2 an hour.
Here are some screenshots of my example. (I Censored My Name Out Of The URL, And I Cropped Them)
All you do is make 3 boxes, With links to other webpages in them. It can look the same in all the pages. It is recommended to make rounded corners.
<div id="Tab1">Tab Numbah One </div><div id="Tab2">Tab Numbah Two </div><div id="Tab3">Tab Numbah Three </div>
Go into your external CSS sheet, make them all float left, and on the same line, make it look pretty, and you NEED a border of some sort.
Then make an overriding style in each of your pages. Make the bottom border non-existent, so it looks like the tabs of a binder. I changed the color, so when you were on that page, it looked a bit better. Note, I indent my CSS very unusually.
Page 1
#Tab1 {
border-bottom:none;
background-color:white;
}
Page 2
#Tab2 {
border-bottom:none;
background-color:white;
}
Page 3
#Tab1 {
border-bottom:none;
background-color:white;
}