Copy a Javascript datepicker - javascript

I would like to copy a Javascript datepicker (calender) from one app to another. But I could not do that. If i save the original app page(the site from where I would like to copy) the datepicker is not working (peculiar). Even I copy pasete the html and css code also but I am not getting the javascript datepicker. What can be the solution?

Try looking at the page source. Download necessory .js files, .css files into your folder / directory. Also copy relevant JavaScript, CSS and HTML from the page. Then compile another html file in that directory using downloaded files and copied scrips. This should work.

Related

CSS working on based URL but not in other pages of the site. CodeIgniter

I am creating a simple website. I got a responsive HTML template but the problem is the CSS only works on the based URL but when I started to click the other links the CSS was not applied. I am using CodeIgniter framework. I already tried to change the .htaccess file but with no luck. I am sure that I have used proper declaration of the HTML tags because the CSS showed on the main page (base URL). You can visit the site for your reference
For your reference. Here are the .js and .css included in the template I am using.
http://barangayxyz.net23.net/js/skel.min.js
http://barangayxyz.net23.net/js/init.js
http://barangayxyz.net23.net/js/skel-panels.min.js
http://barangayxyz.net23.net/css/skel-noscript.css
http://barangayxyz.net23.net/css/style.css
http://barangayxyz.net23.net/css/style-desktop.css
It will be a great help if someone can answer my question.
If you are using CodeIgniter, place your JS and CSS files outside the application folder. Then fetch your files from these directories
So instead of : http://barangayxyz.net23.net/js/skel.min.js
Write it as : http://barangayxyz.net23.net/your-assets-folder/js/skel.min.js
See directory structure below:
root
- application/
- system/
- your-assets-folder/
- css/
- your-css-files
- js/
- your-js-files

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.

How to Add external Javascript and CSS for CakePhp

I am new to CakePhp. I want to get the help of the external javascript and css files. I have downloaded those files. And included those files in webroot directory (js and css sub directories). So If I want to use those in a view.ctp how can I call them. Can you explain me simply ?
Simply use the HTML helper like so :
print $this->Html->css("name_of_css_file");
print $this->Html->script("name_of_javascript_file");
So long as you not doing anything crazy and are using the default ".css" and ".js" extensions - you can leave out the extensions from the above code.
Cake is still PHP. You must add link do css in head of html file (.ctp view file).
There are two ways, write link tag with rel and src attributes or using HtmlHelper

VS2010 WebApp .js+.css able to be embedded fully within HTML code?

So I'm looking to take HTML code for a slideshow and insert it into an HTML box for an app.
However, obviously the .js and .css dependencies need to go with it, or else it won't function properly.
Is there a way/program that allows me in VS to take those classes and insert them within the HTML file so that they are all read at once, and the slideshow works? Ideas?
Thanks,
D.
Use external files to allow the browser to cache them. Put the reference to the external files in your master page.

Some HTML files associated with Dreamweaver template (.dwt) not recognizing jquery/javascript

I have been tasked with updating the navigation on a site that is using a Dreamweaver template (DWT) as the base file. The navigation was originally built using jQuery navigation UI, however this did not address all of our needs and I have updated it with another version of an accordion.
The .dwt file only is only controlling the navigation and the head of the site.
I have integrated the new xhtml structure and added/removed javascript/jquery into the .dwt file. I saved the file, therefore updating all of the relevant .html files, and verified that the accordion works.
However - the accordion does not work for all of the xhtml files. Some files, seemingly at random, are not pulling in the javascript.
When opening the relevant .html files, I can verify that they have all been updated with the new xhtml and the correct javasctipt. However, when viewing the .html files that are not displaying correctly with FireBug, I can see that none of the jquery/javascript is being applied to the navigation (classes are missing that are injected into the xhtml, but the structure and css is correct).
I've done some research and the only issues I've been able to find are related to .xhtml files not being updated with the correct code, but in my case all of the affected files have the correct xhtml and scripts in the head.
Does anyone have any light to shed on this subject? I am quite puzzled.
Are you absolutely certain that the updated files and new versions have been correctly loaded to the live server? Even if Dreamweaver updates the child files from the .dwt you need to make sure everything is uploaded.

Categories

Resources