In Business Catalyst, is there a conditional statement that allows loading a different stylesheet based on whether or not a user is logged-in?
Changing style using GetElementById does not work as there are multiple system-generated elements that need to be re-styled. I have tried GetElementByClassName, but this does not work. I thought perhaps by loading a completely separate stylesheet based on logged-in status might work. Thank you.
You should be able to insert this tag:
{module_isloggedin}
Anywhere you want... for example in your ID/class syntax:
id="menu_{module_isloggedin}" or class="menu_{module_isloggedin}"
Or you should be able to even do something like:
<link rel="stylesheet" type="text/css" href="/login-{module_isloggedin}.css">
which will resolve to:
<link rel="stylesheet" type="text/css" href="/login-1.css">
if the user is logged in and
<link rel="stylesheet" type="text/css" href="/login-0.css">
if the user is not logged in...
Try that out... :)
Related
The example given in jsfiddle.net/jjx86sqb/ is excellent and would like to download all the files.
Pls let me know how to download it.
I want to run the sample html file example locally
Simply copy and paste the HTML and jQuery sections of the fiddle to your own document.
Don't forget to include the four relevant external files:
https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css
https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js
https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/css/dataTables.alphabetSearch.css
https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/js/dataTables.alphabetSearch.min.js
You'll also need to reference jQuery itself (version 1.11.0 in the fiddle).
Version 1.11.0 can be found at:
https://code.jquery.com/jquery-1.11.0.min.js
Note that jQuery must be referenced before the four DataTables scripts.
Your <head> should look like this:
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/css/dataTables.alphabetSearch.css">
<script type="text/javascript" src="https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/js/dataTables.alphabetSearch.min.js"></script>
</head>
The jQuery code itself must be placed between <script> tags after the five external files have been included.
Hope this helps! :)
it is possible. and easy.
add /embedded/ to the URL of the jsfiddle you want to download.
click on the result tab
right click on the screen and select view frame source (and not! view page source)
save the complete html you see to html file.
It is impossible and unnecessary feature to download the code. There are max 3 codes for you to copy viz. HTML, CSS and the script.
Just click on any of the code > Ctrl+A > and copy and paste it wherever you want.
Repeat the same steps for each code.
I'm using bootstrap-table-export to be able to export data from a table, but the icon is weird:
Does anyone knows how to change this icon? I read the docs, but I didn't understand it.
The icon is a glyphicon. If you got this symbol instead of the normal glyphicon-export, you should check if you are including the bootstrap correctly. The recommended CDN for Bootstrap is:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Hope it helps.
For Dojo TabContainer I am setting two Tabs with titles: Role, Admin.
My tabs are not not at all styled.
In the browser those two Tabs are coming as RoleAdmin
How can I style tabs?
Can anybody please suggest?
It sounds like you need to add a theme.
Add the css to the head.
<link rel="stylesheet" type="text/css"
href="PATH_TO_DOJO/dijit/themes/claro/claro.css">
Add the theme to the body tag
<body class="claro">
http://dojotoolkit.org/reference-guide/1.9/dijit/themes.html
I found the below great technique in http://www.codeproject.com/Articles/331920/DataGrid-View-with-CRUD-operations-using-Dojo-Data
And the answer is:
<script>
dojo.query("body").addClass("claro");
</script>
With the above answer, my Tabs are looking like a charm.
I had a really simple question.
I'm trying to implement Flexslider (http://www.woothemes.com/flexslider/) onto my page http://www.gofree.com/123-LAC/ but it does not seem to work (the images appear really large and are listed).
I followed all of the directions on the page. What am I doing wrong?
Thanks in advance!
Use jquery library above the flexslider.
<link rel="stylesheet" href="styles/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="styles/jquery.flexslider-min.js"></script>
And dont use another jquery library in that page. It create the conflict of both jquery library.
Always Use jquery latest.. It improve the efficiency and performance
of the site
Learn jquery
I've read the Jquery docs page on conflicting scripts. But i'm not really understanding it. As well, it's multiple .js files that are conflicting, and they have the same names to boot. (but they aren't the same within.)
I have a set of .js for a fisheye effect. Then i have another set of .js for draggable. Draggable won't work with the fisheye scripts, and vice versa.
These links are for the fisheye effect.
<script type="text/javascript" src="HandFan/jquery-1.js"></script>
<script type="text/javascript" src="HandFan/ui_003.js"></script>
<script type="text/javascript" src="HandFan/ui.js"></script>
<script type="text/javascript" src="HandFan/effects.js"></script>
<script type="text/javascript" src="HandFan/ui_002.js"></script>
These files are for draggable.
<script type="text/javascript" src="Draggable/jquery-1.js"></script>
<script type="text/javascript" src="Draggable/ui.js"></script>
<script type="text/javascript" src="Draggable/ui_002.js"></script>
From what i understand of what the doc said,
File1.noConflict();
// Use script File1 via File1(...)
File1(document).ready(function(){
File1("div").hide();
});
// Use script File2 with $(...), etc.
$('someid').hide();
I'm not sure what to do with regards to the multiple files, I'm sure that speaks to how new i am to this.
EDIT
After looking online, i thought it would do me good to use a single jquery.1.3.2.js file, hosted by google. However, that didn't work. So it would seem my problem is that i need each of the scripts above for my effects to work, and this just seems wasteful to me. Is there a more efficient way to do this?
I don't fully understand why you need to include jQuery more than once. For example, the draggable plugin will work fine if you've already included jQuery further up on the page. The same goes for any UI scripts you're including.
Your script declarations will likely work better like this:
<script type="text/javascript" src="scripts/jquery-1.js"></script>
<script type="text/javascript" src="scripts/ui.js"></script>
<script type="text/javascript" src="scripts/ui_002.js"></script>
<script type="text/javascript" src="HandFan/effects.js"></script>
<script type="text/javascript" src="HandFan/ui_003.js"></script>
The draggable stuff should work fine without needing to have its own set of the same base libraries defined.
Given this might not be working for you, let's see if it's the jQuery files that are the problem at all.
The jQuery noConflict() method allows you to assign different variables to call jQuery instead of the very common $ symbol. See if the following works:
var j = jQuery.noConflict();
You can then use the letter j where you would ordinarily use $. For example:
j('#myElement').draggable();