Hello I'am traing to create language combobox with flags using Bootstrap Form Helper V2.3.0
So I
Download Bootstrap Form Helper V2.3.0 FREE Version
Download Bootsrap 3.0.0 (http://bootstrapdocs.com/v3.0.0/docs/)
Link Jquery jquery-1.10.2
This version of jquery and bootsrap is requerd for Bootstrap Form Helper V2.3.0
Than create simple index.html page and copy example code from documentation http://bootstrapformhelpers.com/language/#jquery-plugins
The result is EMPTY select list and no erros in console
Can some one expain me what I'm doing wrong?
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Form Helpers Basic Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Bootstrap Form Helpers -->
<link href="bootstrapformhelpers/css/bootstrap-formhelpers.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Example 3 -->
<div class="bfh-selectbox bfh-languages" data-language="en_US" data-available="en_US,fr_CA,es_MX" data-flags="true">
</div>
<!-- Example 4 -->
<span class="bfh-languages" data-language="en_US" data-flags="true"></span>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.10.2.js" integrity="sha256-it5nQKHTz+34HijZJQkpNBIHsjpV8b6QzMJs9tmOBSo=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap Form Helpers -->
<script src="bootstrapformhelpers/js/bootstrap-formhelpers.js"></script>
</body>
</html>
Related
I watched the video tutorial Laravel 9 and Vue 3 SPA online store 11. Transferring the html store template to App vue. In it, the server part is made on Laravel, and the client part on Vue.
I downloaded the layout of the client part of the online store - HTML template of the client part of the online store from Course Laravel 9 and Vue 3 SPA online store 0. Overview of the html store template and task priorities in the description under the video.
Copied the contents of the file C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\index. html to the C:\Openserver\domains\clientpart\public\index.html file of the vue clientpart project (as in the video). Copied the folder (with styles, fonts and pictures) C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\assets instead of C:\Openserver\domains\clientpart\src\assets.
The assets folder in the karte-fashion-multipurpose-ecommerce-html-template directory has the following location relative to the karte-fashion-multipurpose-ecommerce-html-template\index.html file
The structure of the project, as can be seen from the screenshot below, is as follows
Changed all paths starting with assets to ../src/assets (in C:\Openserver\domains\clientpart\public\index.html) and got the following file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title For This Document -->
<title> Karte - Multipurpose E-Commerce Html Template</title>
<!-- Favicon For This Document -->
<link rel="shortcut icon" href="../src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
<!-- Bootstrap 5 Css -->
<link rel="stylesheet" href="../src/assets/css/bootstrap.5.1.1.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400;500;600;700&family=Roboto:wght#300;400;500;700&display=swap" rel="stylesheet">
<!-- FlatIcon Css -->
<link rel="stylesheet" href="../src/assets/fonts/flaticon.css">
<!-- Slick Slider Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/slick.css">
<!-- Ui Tabs Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/jquery-ui.min.css">
<!-- Magnific-popup Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/magnific-popup.css">
<!-- Nice Select Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/nice-select.v1.0.css">
<!-- Animate Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/animate.css">
<!-- Style Css -->
<link rel="stylesheet" href="../src/assets/css/style.css">
</head>
<body class="shoe">
<!-- ==========Preloader========== -->
<div class="loader"><span>Karte...</span></div>
<!-- ==========Preloader========== -->
<!--===scroll bottom to top===-->
<i class="flaticon-up-arrow"></i>
<!--===scroll bottom to top===-->
<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->
<script src="../src/assets/js/jquery.v3.6.0.min.js"></script>
<!-- Popper v2.9.3 Js -->
<script src="../src/assets/js/popper.v2.9.3.min.js"></script>
<!-- Bootstrap v5.1.1 js -->
<script src="../src/assets/js/bootstrap.v5.1.1.min.js"></script>
<!-- jquery ui js -->
<script src="../src/assets/js/plugin/jquery-ui.min.js"></script>
<!-- Parallax js -->
<script src="../src/assets/js/plugin/jarallax.min.js"></script>
<!-- Isotope js -->
<script src="../src/assets/js/plugin/isotope.js"></script>
<!-- Slick Slider Js -->
<script src="../src/assets/js/plugin/slick.min.js"></script>
<!-- magnific-popup v2.3.4 Js -->
<script src="../src/assets/js/plugin/jquery.magnific-popup.min.js"></script>
<!-- Tweenmax v2.3.4 Js -->
<script src="../src/assets/js/plugin/tweenMax.min.js"></script>
<!-- Nice Select Js -->
<script src="../src/assets/js/plugin/nice-select.v1.0.min.js"></script>
<!-- Wow js -->
<script src="../src/assets/js/plugin/wow.v1.3.0.min.js"></script>
<!-- Wow js -->
<script src="../src/assets/js/plugin/jquery.countdown.min.js"></script>
<!-- Main js -->
<script src="../src/assets/js/main.js"></script>
<!--==== Js Scripts End ====-->
<script type="module" src="../src/main.js"></script>
</body>
</html>
The page looks like this
And it should look like
The App.vue file contains the content and all images starting with ../src/assets/images are rendered normally, and the styles included in public/index.html with `../src/assets/ css' didn't work.
Tell me how to achieve the inclusion of css files and thus the correct display of the page.
P.S. In the video tutorial, the index.html file is located at C:\Openserver\domains\clientpart\index.html instead of C:\Openserver\domains\clientpart\public\index.html. I'm not sure if it affected, but I wrote it just in case.
P.S. Here are screenshots of the developer tools (in which you can see the connection of css files in the lower right corner) - as it should be and as it is
P. S. Add errors
Suggest solution for Vue, on Stackoverflow link given solution for Node.js.
I have recently started learning Django framework with Python. I've been doing a course on YouTube. Unfortunately, one of the steps did not go as on the course.
The CSS and JS features does not apply to my page. Do you have some suggestions to make it apply to my page? I was using the starter template.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
{% if title %}
<title>Django Blog - {{ title }}</title>
{% else %}
<title>Django blog</title>
{% endif %}
</head>
<body>
<div class="container">
{% block content %}{% endblock %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
I can see you're using Bootstrap CDN. Maybe when the tutorial was recorded, Bootstrap had a different version (for example, v3.0). However, currently you will get the latest version (v4.3.1) from their website. In that case, some styles will not work. For example, bootstrap3 had img-circle, pull-right classes which have been now changed into rounded-circle, float-right classes respectively in the latest version.
If you want to follow along, I recommend you take note of the version that's being used in the tutorial and use that particular version in your project. Another option would be a simple google search to see if the CSS class exists in the latest version. If not, they have probably just renamed the class and you should use the new class names.
[UPDATE]
Please not that most of these elements are loaded from the cache so no need to connect to the database which means it's not a database or server delay.
I'm using Laravel in my project and here's the main header code
<!DOCTYPE html>
<html lang="{{ $lang }}" dir="#if($lang == 'ar') rtl #else ltr #endif">
<head>
<meta charset="utf-8">
<meta name="_token" id="main_token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script src="<?=config("app.public_path")?>js/jquery-2.2.4.min.js"></script>
<script src="<?=config("app.public_path")?>js/bootstrap.3.4.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="<?=config("app.public_path")?>js/modernizr-2.7.1.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="<?=config("app.public_path")?>bootstrap/css/bootstrap.min.css">
#if($lang == 'ar') <link rel="stylesheet" href="<?=config("app.public_path")?>css/bootstrap-rtl.css"> #endif
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="<?=config("app.public_path")?>css/style_{{$lang}}.css">
And the config public path
'public_path' => 'http://www.example.com/public/',
The elements load in wrong places with wrong sizes then in seconds the stylesheet loads and elements get positiined correctly and resized too which makes the page look ugly at the beginning and I'm talking about css not javascript or jQuery. Why does this happen and how to solve it?
You should be using the asset function instead of PHP shorthand echo tags and config paths.
For example, instead of this:
<?=config("app.public_path")?>js/jquery-2.2.4.min.js
You are supposed to do this:
{{ asset('js/jquery-2.2.4.min.js') }}
Also, consider using defer for your scripts e.g.:
<script src="{{ asset('js/jquery-2.2.4.min.js') }}" defer></script>
I'm using CDNJS to access the uikit library. The CSS I download from their customizer, which allows you to create your own personal theme scheme, isn't functional. Below is how I linked to my CSS files, the path is correct because my portfolioStyle.css file is functional.
<head>
<meta charset="utf-8">
<title>Contact</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/portfolioStyle.css">
<link rel="stylesheet" type="text/css" href="assets/css/uikit.css">
<!-- UIkit -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Caveat|Stoke" rel="stylesheet">
so i don't think my website is picking up the css as when i make it live, the content is there but the style is not. The background is black when it should be white, the font isnt taking effect & the nav isnt showing either. I have done 2 sites the same way only difference is i have uploaded the site to a HTDOCS folder rather than a public_html as this what the hosting said to do...
this is what it looks like live
but should look like this
HEAD OF INDEX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- PAGE TITLE -->
<title>Peacehaven Golf & Fitness</title>
<!-- MAKE IT RESPONSIVE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<meta name="description" content=peacehavengolfcourse">
<meta name="author" content="">
<!-- BOOTSTRAP -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- STYLES -->
<link href="css/style.css" rel="stylesheet" media="screen">
<!-- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
If you're sure that CSS is there, it may be a cache issue. The old assets are cached by your browser and the new assets are not loaded.
To test, load the website in incognito mode, and the browser won't cache/load the cache.
Mac:
Cmd + Shift + N
Windows/Linux:
Ctrl + Shift + N
hi your site is working but can you change this code line 10:
<meta name="description" content=peacehavengolfcourse">
to
<meta name="description" content="peacehavengolfcourse">
and remove line 38 and 40 </li> </ul>
add line 309 <footer>
You have syntax errors...