I developed a system with no styling (no bootstrap and CSS) now i need to add them. i do not have a proper knowledge about bootstrap but went through W3Schools and understood the concepts. Now my problem is I can not understand the sequence of implementation i.e what must be done first then second then third etc. and how to use the concepts. It would be grateful if someone could please provide me some help in sorting out my issues. Many thanks
All you need to do is add the stylesheets / js / etc. to your <head> section in your html like this:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
From here on, you're ready to go.
See this as an example.
Related
bootstrap can't load when open web in another pc (lan), but work fine in my own computer..
here the image
in my laptop
in other pc
what setting i need to change in xampp or apache ?
thankyou
edit : my bootstrat, etc for program in second pic
<link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet" type="text/css"/>
<link href="<?php echo base_url().'assets/css/jquery.datatables.min.css'?>" rel="stylesheet" type="text/css"/>
<link href="<?php echo base_url().'assets/css/dataTables.bootstrap.css'?>" rel="stylesheet" type="text/css"/>
<script src="<?php echo base_url().'assets/js/jquery-2.1.4.min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
<script src="<?php echo base_url().'assets/js/jquery.datatables.min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/dataTables.bootstrap.js'?>"></script>
it works now i just need change the config , from local host, to my own ip/ make it dynamic so i don't need to change it everytime my ip change.
thx 4 all your help and answer
Change your css link to this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
and your script links to this:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
That way it will work on any system without you having to copy over all the bootstrap files every time
I think it is a path problem.
Please try to access your web pages by the IP (which you are using on the desktop) on your laptop. It may not work due to unable to access assets. So you need to change your path of CSS, JS, and Images.
If all things work fine on your laptop with IP then it will work on your desktop as well.
Here is my code:
<head>
<link rel="stylesheet" href="http://localhost/css/estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
The program works, but if I use the inspect element, I get these warnings. Can anyone help me to figure it out?
Hope you can help me :D
The problem is that you have linked to your own version of jQuery incorrectly.
As you are already loading it twice from the CDNs, you shouldn't even need to load it locally. Just load the latest version of jQuery from the CDN once, and don't worry about loading a local copy as well:
<head>
<link rel="stylesheet" href="/css/estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
Note that your CSS was throwing an error as well as your jQuery, meaning that you do not have a file at http://localhost/css/estilos.css. I've used /css/estilos.css/ in my anser, to refer to the root. This would point the CSS file at: [root]/css/estilos.css. Depending on your file structure, you may need to use css/estilos.css/ instead (without the leading slash). For more information about relative paths, check out CSS Trick's article.
Hope this helps!
It says your local css and js files are not found. look right at the debug panel, there is a 404 code.
I am new in PHP programming but have some experience using .NET MVC 4.
In .NET, we can specify the HTML page which will act as main layout that share the references (e.g Bootstrap, CSSs, Javascripts etc.etc) which normally being called shared view "_Layout". In PHP, is this possible and if yes, how can I achieve that?
thanks a lot
example:
Below reference will be used for all views in the project if specified;
<head>
<script type="text/javascript" src="~/Scripts/jquery-2.1.0.min.js" ></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
</head>
I have a calendar script I got off the internet working fine. Recently, I tried incorporating a jQuery sorting script, but I can't get both working together. It's either the calendar script or the sorting one that works.
I don't have much jQuery experience. I've tried changing the order in lots of ways, changing the jQuery versions and commenting out a bunch of JS scripts but I still can only get either get or one or none of them working.
The page is password-protected and the information being pulled from the database is private, but if it helps I'll try and make a separate page with dummy data; but I hope the mistake is a glaring one.
Here's the page head:
<head>
<title>My Page</title>
<!-- css -->
<link rel="stylesheet" type='text/css' href="stylesheets/datatable.css"/>
<link href="stylesheets/pagination.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/Aristo.css" />
<!-- scripts -->
<!-- [if lte IE 8]>
<script language="javascript" type="text/javascript" src="scripts/excanvas.js"></script> <![endif] -->
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="scripts/jquery.datatables.js"></script>
<script type="text/javascript" src="scripts/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="scripts/jquery.placeholder.js"></script>
<script type="text/javascript" src="scripts/jquery.accordion.js"></script>
<script type="text/javascript" src="scripts/jquery.tabbed.js"></script>
<script type="text/javascript" src="scripts/application.js"></script>
<!-- If I enable this, the calendar works but the sorting script stops working:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script> -->
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
</head>
Is there an obvious mistake here? I'm using someone else's jQuery. Let me know if there is any other info I can add that might help with this...
The problem is that you are loading the jQuery library twice when you uncomment the part in question. This will result in the second script overwriting the $ and therefore also all functionality the plugins above have already attached to it (their functions are living inside the $ object).
Simple solution to your problem: Only load jQuery once (preferrably via a CDN), load the original library as the first script, then load its plugins, and then load your own scripts.
The correct order should therefore be:
<!-- Loading jQuery via Google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!-- Loading jQuery scripts -->
<script type="text/javascript" src="scripts/jquery.datatables.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="scripts/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="scripts/jquery.placeholder.js"></script>
<script type="text/javascript" src="scripts/jquery.accordion.js"></script>
<script type="text/javascript" src="scripts/jquery.tabbed.js"></script>
<script type="text/javascript" src="scripts/application.js"></script>
Your sorting script and your calendar script are using 2 different versions of jQuery. I assume the one your sorting script is pulling up is conflicting with the calendar one (the one commented out in your code). Specifically:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
and:
<script type="text/javascript" src="js/jquery-latest.js"></script>
are competing with each other.
I want to build a website for e-learning.
The course will be conducted via webcam and members will pay to attend the web cast.
I thought that Skype is a solution, but I need to find a way to block and unblock contacts using PHP through the page.
I have found a URL handler but only for a call skype:user?call I am not sure about other functions such as block and unblock.
I would like someone to help me with Skype and to tell me whether or not there is some other way I can handle it through the page or suggest to me another program that gives me more like google talk might.
Or is there a CMS that can do my work?
First of have a look at Skypes public API to get familiar with what is possible. Here's the pulic api page: http://developer.skype.com/accessories
Also have a look in the forum and see if you find anyone else that has done what you want to do: http://forum.skype.com/index.php?showforum=16
To implement everything in php there are some wrapper libraries available. Here's the most popular and developed one:
https://github.com/yoya/php-skype/blob/master/Skype.php
<head>
<title><?php echo SITE_TITLE; ?></title>
<script src="assets/js/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/data-table/jquery.dataTables.min.js"></script>
<script src="assets/js/data-table/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/data-table/dataTables.bootstrap.min.css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
</head>