Semantic UI modules correctly styled but not responsive - javascript

I am quite new to JS and Jquery and I fear that I must have missed something fundamental to incur this error: none of the semantic modules I tried to include in the html and initiate with JS appears to be responsive, even when I just copy the snippet from semantic ui examples.
I used bower to install Semantic UI and Jquery to a separate bower_component directory which I then added as an additional content root to the project directory in phpstorm. I included semantic files in the html header as such and paths are all recognized:
<link rel="stylesheet" href="semantic/dist/semantic.min.css">
<script src="jquery/dist/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script src="js/semantic_test.js"></script>
I copied the html from the first example this link to the html and the js to "js/semantic_test.js". The page is appearing static with all the styling correct but no response, in Chrome or Safari.
I tried some bootstrap components which functioned correctly. I have also tested CDN paths for both Jquery and Semantic UI - not working still. I have spent hours googling and would deeply appreciate some help please!

Did you wrap your jquery code in document.ready
$(document).ready(function() {
// your code here
// ...
});
Sometimes this can happen when the script to initialize your html components with JavaScript runs before the components are loaded into the dom.

Related

Bootstrap 4 downloaded files not working. Am I missing something?

I've created a site with Bootstrap 4. I downloaded all the files necessary for Bootstrap to work, and for some strange reason, it's not working. When I use the CDN version of Bootstrap, everything works just fine. Am I missing something? You can view the site here.
This is my file structure for JS
This is my file structure for the CSS files
You seem to be including the Bootstrap CSS correctly using a relative path - css/bootstrap.min.css.
It appears you are using the CDN version of the Bootstrap JS and want to use the copy on your own server. You can include it in a similar way to that of the CSS above.
i.e.
<script src="js/bootstrap.min.js"></script>
If you have any further questions, comment below and I will help further.

ReactJs external JavaScript files not working

I'm using a external JavaScript library called Masonry (Cascading grid layout library) https://masonry.desandro.com/.
I have created a demo page using this library and everything seems to work fine, However once i incorporate this library in a React app it doesn't work.
Scripts
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<!-- <script src="../src/assets/js/JQuery/masonry.js"></script> -->
<script>
$(window).on('load', function(){
var $content = $('.content-container').masonry({
// options
itemSelector: '.masonry',
percentPosition: true,
singleMode: true
});
$content.imagesLoaded().progress( function() {
$content.masonry('layout');
});
console.log('Works!')
});
</script>
</html>
I have tried two methods, adding an external JavaScript file masonry.js and adding the code in a script tag within the index.html page. whenever i use the external JavaScript file it doesn't work at all (the console.log('Works!') doesn't even show in the console). But if i use the code within the Script tag in the index.html page the masonry works occasionally if i do a few page refreshes and the console.log('Works!') shows up in the console every time.
I'm not sure if its because Reactjs has a different way in adding external JavaScript libraries / files, but i have searched online what is the correct way to set up external JavaScript files in a react app and it came up with multiple methods so i'm kind of confused to witch is the correct / best.
Also i have checked the Network in the browser developer tools and the external library / JS file imports seems to be loading in fine.
Just a note: the .content-container child elements change on button clicks in the Reactjs but not in the demo page.

What is the order of linking font, CSS and scripts

If I have a website project with:
reset.css
remote bootstrap lib
master.css
remote font awesome CSS
two google fonts
JQuery lib
main.js
Consider the best loading speed and possible override. What would be the best order to link them in <head>
I know what is added later will override the same rule with same priority previous style sheets applied and browser rendering from top to bottom, <head> first then <body>
I also learned from google that there is something called prefetch in the modern browsers.
Personally, I would do reset.css, font awesome, google font, bootstrap lib, master.css, Jquery lib, main.js. Universal rules first, lib first. But I don't know exactly how to deal with font since they are stylesheet as well.
I would like to point out that the orders suggested in previous answers are not fully in sync with the developers' best practices as suggested by Google and MDN.
CSS should be loaded first in the head followed by font stylesheets or google font stylesheets so that the layout doesn't appear broken for a while especially on slow connections.
So, Bootstrap css can be loaded into head while Bootstrap js should be loaded later after jQuery.
JS, jQuery and its dependencies can be moved to the bottom of the page to promote faster page loading because JS code can affect the content and layout of a web page, browsers delay rendering any content that follows a script tag until that script has been downloaded, parsed and executed.
And as bootstrap js has jQuery as a dependency. So, jQuery should be loaded first followed by boootstrap js and main js file.
So, the correct order in accordance with best developer practices:
<head>
1. Bootstrap CSS
2. Reset CSS
3. Master CSS
4. Google Font CSS
5. Font Awesome CSS
</head>
<body>
Your content goes here
<!-- add js files to the bottom of the page-->
6. jQuery
7. Bootstrap js
8. Main js
</body>
It is important to load jQuery before Bootstrap and all custom CSS after bootstrap. It is better to load the google font stylesheet in the beginning.
The order should be libraries first followed by custom scripts and styles. Since bootstrap depends on jQuery, jQuery should be loaded before loading the Bootstap's JavaScript file.
google font
fontawesome
JQuery lib
remote bootstrap lib
reset.css
master.css
main.js
Loading the JavaScript files at the end of the body (just before </body>) will improve site loading speed when compared to having JavaScript files between the head tags.
Since you question is in terms of performance. below are some of my views
1. load google fonts aysnc
you can load the font asynchronous, so then it will not block the rendering of the page. you can use the javascript font loader, https://github.com/typekit/webfontloader
2. load css first
the below method may be the best way to go
fontawesome
JQuery lib
remove bootstrap lib
reset.css
master.css
i also suggest you merge reset.css and master.css since i believe sending a separate request for reset.css is useless and merging those small codeset with master.css will be a better approach.
3. load JS
finally load the master.js file, its better you load this file in bottom of the body tag, since then it will improve page load performance effecting the critical rendering path.
note: please read about critical rending path, which may explain in-depth about page-load performance.

ASP .Net MVC Web Application integrating bootstrap templates

I know I will probably get too many down votes for this question, but I just could not find a tutorial to my problem.
I have created a ASP .Net MVC project in Visual Studio 2013 (New Project -> ASP.NET Web Application -> MVC) and I am trying to change the default bootstrap for this project, I have downloaded bootstrap templates from different websites but I just can not use them in my project. I have followed a few questions on SO and some tutorials but all I could was change some styling, not entirely use the template I want to use.
Tutorial that I read:
http://www.mytecbits.com/microsoft/dot-net/bootstrap-with-asp-net-mvc-4-step-by-step
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-with-asp-net-mvc-5
SO Questions:
bootstrap 3 template change mvc5
Bootstrap Jumbotron not becoming full width of Body
After reading above questions and a few more tutorials here and there, I was able to change the theme but not the template, I want to use a parallax theme like this one
I copied the css into bootstrap.css, javascript into bootstrap.js and HTML into my page Home page but then _Layout.cshtml is messing up the display...
My Questions:
1.) Am I doing this the wrong way?
2.) What changes should I make to the _Layout.cshtml file to display the template properly?
3.) I read that there are different versions of bootstraps, the default version that is used in the project when I created it is V3.0.0 and some templates that I downloaded are V3.1.1, Will they be compatible? I followed this to upgrade the bootstrap version of my project to V3.1.1 after that some more .js and .css files were added to my project and things got more complicated.
4.) What will be the _Layout.cshtml file if I use bootstrap V3.0.2 ?
Any help will be appreciated...
EDIT:
I am trying to use this template:
Template
Template
Integrating Bootstrap Template into ASP .Net MVC 5:
First of all create a new Project:
Web Application -> MVC
Run your Project by pressing F5, it will look like:
Now check that your downloaded Bootstrap Template Folder contains following:
css (Folder):
bootstrap.css
bootstrap.min.css
js (Folder):
bootstrap.js
bootstrap.min.js
Note: Sometime bootstrap.css may be named as style.css and bootstrap.js may be named as style.js
You will be making changes to following files in ASP .Net MVC Project:
bootstrap.css
boostrap.min.css
bootstrap.js
bootstrap.min.js
Open your all the files mentioned above in code editor:
Now do the following:
Copy all of the code from bootstrap.css (Template css Folder) to bootstrap.css (Content Folder)
Copy all of the code from bootstrap.min.css (Template css Folder) to bootstrap.min.css (Content Folder)
Copy all of the code from bootstrap.js (Template js Folder) to bootstrap.js (Scripts Folder)
Copy all of the code from bootstrap.min.js (Template js Folder) to bootstrap.min.js (Scripts Folder)
Now its time to adjust your _Layout.cshtml according to the Theme. We will be splitting the index.html file from the Theme folder into two parts, one part will go into _Layout.cshtml and one part will go into 'Index.cshtml`:
Replace your _Layout.cshtml code with the code below:
_Layout.cshtml
Replace your Index.cshtml code with the code below:
Index.cshtml
Now run your Project it will be like:
Link
This is how I solved my problem.
Bootstrap is just the basis. A template may also add additional features in order to be rendered correctly. Things that may or may not be based upon bootstrap. It could also be an older version of Boostrap, or a newer as Boostratp has been at 3.2 for a while.
Usually, you include the main bootstrap.css first, then the css file(s) that the theme uses. Before you reference the bootstrap.js file, load jQuery. There is no set way to make your _layout.cshtml look good without
1) knowing what is wrong. We have to see the rendered code to really understand what is missing
2) What template you are attempting to apply since you may be missing the css or some elements that it uses.
There's a great and simple way to get everything you need to get going. Use Chrome and hit F12 to open the developer tools. Right-click over the area that displays the rendered layout and choose "Inspect Element". It will open the DOM for the entire page but will select an item within an iframe. Find the element immediately within the iframe and right-click and select "Copy as HTML". This will give you the layout as well as script css and script order.
The css that shows in the bootply editor window doesn't go into the bootstrap.css file. It's rendered inline into the code that I showed you how to get at but you can place it into it's own CSS file. Just make sure that CSS file is loaded after the bootstrap css file.
Just for reference, the template appears to be using Bootstrap 3.0.2, which isn't too old but isn't the most current.

Metronic Theme Charts and Graphs

I had downloaded the metronic theme from http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469 to use along with the PyroCMS framework but my issue is i can not get charts or graphs to work. The specific plugins used for these are flot and jquery(ex. jquery.sparkline.js)
Steps done in attempt to make this work:
Downloaded theme
Manipulated included base theme(included in PyroCMS) to display default.html
Copied over code from the charts/default page
Created Css.html and js.html and populated them with paths to the correct file location as well as referenced them in the default.html
Copied over css and js files into the correct folders
Installed in www.website.com/admin
double checked paths
tested if code worked inside pyro and if it worked right out of package and it worked directly out of the zip file
so after that i got everything to work correctly except the pie charts, graphs, and calendar(on the default page) and all the graphs/charts on the charts page. Does anyone know what i am doing wrong or have any other suggestions?
Because the default.html and charts.html work right out of the zip file i know everything is compatible(the plugins and css and all that), just not sure what i am missing when i try to integrate it with PyroCMS
P.S.This is my first post ever so please be tolerant and understanding if the question isnt clear or the question is too vague, i will respond as fast as i can to any comments
I have this theme so I will try to help. Can you confirm you have the following scripts included?
<script src="../../assets/global/plugins/flot/jquery.flot.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.stack.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.crosshair.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="../../assets/admin/pages/scripts/charts-flotcharts.js"></script>
AND most importantly, the initializers:
<script>
jQuery(document).ready(function() {
// initiate layout and plugins
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
ChartsFlotcharts.init();
ChartsFlotcharts.initCharts();
ChartsFlotcharts.initPieCharts();
ChartsFlotcharts.initBarCharts();
});
</script>

Categories

Resources