Hello how do i implement the sidebar from semantic ui? I would like to use the first example on the list.
http://semantic-ui.com/modules/sidebar.html#/definition
I tried copy-pasting the whole div section and putting it on my html
For the javascript(? not really sure), the
$('.left.demo.sidebar')
.sidebar('toggle')
;
i tried putting it on
button onclick , and
function then using href to call
but sidebar is not showing.. what am i doing wrong
You have to include the jQuery library in the <head></head> section of your page:
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
And the semantic.js file:
<script language="javascript" src="[your path here]/semantic.js"></script>
Which you have to download from:
http://semantic-ui.com/
(It's located inside the folder dist. Copy that file in the desire location and populate src with the right path)
BETWEEN <HEAD></HEAD>:
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script language="javascript" src="[your path here]/semantic.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.left.demo.sidebar').sidebar('toggle');
});
</script>
When you add jQuery to your project you can trigger your sidebar by adding this code to your .js file:
$('.element.to.trigger.sidebar').on('click', function () {
$('.left.demo.sidebar')
.sidebar('toggle');
});
Related
I created a ViewComponent which display a Table that require some plugin for enable specific functionalities. Inside the ViewComponent I tried to create a specific section:
#section DataTableScripts{
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
unfortunately I discovered that a ViewComponent cannot load a #section.
So I tried to include the script directly in the ViewComponent, but the problem is that the scripts are loaded before of JQuery which is loaded inside the _Layout, specifically:
ViewComponent
<script src="~/js/JQuery/jquery.dataTables.js"></script>
<script src="~/js/JQuery/dataTables.buttons.min.js"></script>
<script src="~/js/JQuery/dataTables.keyTable.min.js"></script>
<script src="~/js/JQuery/dataTables.responsive.min.js"></script>
<script src="~/js/JQuery/dataTables.select.min.js"></script>
<script src="~/js/JQuery/dataTables.bootstrap4.js"></script>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
Layout
<script src="~/js/jquery.min.js"></script>
so in this case I'll get:
jQuery is not defined
How can I manage this situation?
Simply set the Layout for your ViewComponent .
#{
Layout = "/Views/Shared/_Layout.cshtml";
}
#section DataTableScripts{
<div>It works </div>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
Here's the screenshot that works :
[Edit]
This approach does not seems a good way to do that . As #Kirk Larkin says , this will make the Layout render twice . Another patch is to write a new RefinedLayout.cshtml and set the Layout of ViewComponent as the RefinedLayout :
#{
Layout = "_RefinedLayout.cshtml";
}
#section DataTableScripts{
<div>It works </div>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
For more information , refer workaround by MortenMeisler
You are using<script src="~/js/JQuery/jquery.dataTables.js"></script> twice. Just keep it once.
Specifying another layout for viewcomponents with scripts will duplicate scripts. And #section is just ignored during rendering.
So I replaced jquery document ready with plain javascript domcontentloaded and any jquery can be written inside domcontentloaded. Not a permanent good approach but works for me.
<script>
document.addEventListener('DOMContentLoaded', function (event) {
console.log($ === jQuery)
});
</script>
I need to have a stylesheet link removed from my HTML head when the user clicks a link. I found the following, but I need a MooTools equivalent.
To remove a stylesheet simply give it an id
<link href="cssFolder/sheet2.css" rel="stylesheet" type="text/css" id="sheet2">
And insert the following script just before tag
<script type="text/javascript">
$(document).ready(function () {
jQuery('#sheet2').remove();
});
</script>
window.addEvent('domready', function() {
$('sheet2').destroy();
});
Information:
domready event
$
Element.destroy()
Try this:
sheet = document.getElementById(sheet2)
sheet.parentNode.removeChild(sheet)
I am developing with CakePHP and want to modify height of CKEditor generated with cake html helper, because I need to have two editors inside one page, with different height.
How I can do this with css?
if I remember that you can do when you define ckeditor js in your view e.g.
ed = CKEDITOR.replace("textarea",
{
height:"291", width:"400"
});
check this documentation:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.width
http://cksource.com/forums/viewtopic.php?t=13810
Regards.
<script type="text/javascript">
CKEDITOR.replace( 'texarea', height:'350px',autoGrow_minHeight:'350px'});
</script>
or
<script type="text/javascript">
CKEDITOR.replace( 'texarea', height:'350px',autoGrow_minHeight:'100%'});
</script>
I'm using DNN 5.4 with the default google api jquery reference:
I have confirmed that jquery.min.js is loading. I don't know if there's other jQuery (other than the plugin) that needs to be loaded.
I'm utilizing the Google Code jQuery Textbox Watermark Plugin (Link)
Web Dev Toolbar & Firebug suggest that both jQuery and the Watermark Plugin are loading. This code is sitting near the top of my skin .ascs:
<script type="text/javascript" src="/js/watermark/jquery.watermark.min.js"></script>
The following code works (when the inputs are wrapped in form tags) in basic html document. However, when placed inside either a DNN skin or DNN module, it fails to work and generates a javascript here.
<script language="javascript" type="text/javascript">
(function ($) {
$(document).ready(function () {
jQuery("#xsearch").watermark("Leave blank for USA");
})
})(jQuery);
</script>
SearchString: <input type="text" id="xsearch" name="xsearch" />
<input type="button" value="search" id="xsubmit" name="xsubmit" />
The Error (FireBug):
jQuery("#xsearch").watermark is not a function
[Break on this error] jQuery("#xsearch").watermark("Leave blank for USA");
This alternate code produces the same error:
<script language="javascript" type="text/javascript">
jQuery.noConflict();
jQuery(function () {
jQuery("#xsearch").watermark("Leave blank for USA");
jQuery("#xsubmit").click(
function () {
jQuery("#xsearch")[0].focus();
}
);
});
</script>
And finally, the same error is produced when I replace jQuery with $
It feels like a conflict of some sort, but I'm lost on what to do next.
Thanks in advance for your time
I noticed this is because :
<script type="text/javascript" src="/js/watermark/jquery.watermark.min.js">
should be
<script type="text/javascript" src="js/watermark/jquery.watermark.min.js">
If you are having js folder in your skin root.
You can see FireBug's net tab to make sure your script reference is loading properly. I'm judging this because I've done lots of dnn development and the link you referenced will become
http://www.mydomain.com/tabId/80/js/watermark/jquery.watermark.min.js when http://www.mydomain.com/tabId/80/Default.aspx is served
In general... How can I make a call on a function of an external java script file?
More specific...
In the head tag i have
<script type="text/javascript" src="JScript/FontSize.js"></script>
The external javascript file, (that i would like to call) FontSize.js contains the following functions.
function checkCookie()
function setCookie(c_name, value, expiredays)
function getCookie(c_name)
function increaseFontSize()
function decreaseFontSize()`
The FontSize.js is located at the ~/Jscript/ directory
I guess the body on load should contain something like
<body onload="/JScript/Fontsize.js/checkCookie()">
Of course nothing works as it should because, i do not know how to make the call to a function to an external js file
You just call it as if it were local :)
<body onload="checkCookie()">
Or, do it in script:
window.onload = checkCookie;
When you declare a function and it's not in another object/namespace, it's just globally available, and you can call it as if it immediately preceded your current code. By default these functions will be on the window object, you can see a short demo here.
For example (doesn't matter where this function's defined, external or not):
function myFunc() { alert('hi'); }
myFunc();
window.myFunc(); //same call, unless there's *another* myFunc in a local-er scope
<html>
<head>
<script type="text/javascript" language="javascript" src="main.js"></script>
</head>
<body>
<!--The extranal main.js file contains samp() function.. -->
<script>
<!-- samp(); -->
</script>
</body>
</html>