I am new to bootstrap. After researching, I understand that I can use javascript to change background color. I would like to dynamically change the background color or image of a specific container. I am using external links to the style .css files
(example:
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap->theme.min.css">
).
you can use jQuery and do as follow :
To change the bc-image:
$('.YourContainer').css('background-image', 'url(../images/backgrounds/bc-image.jpg)');
to change the bc-color :
$('.YourContainer').css("background-color", "yellow");
don't forget to add jQuery :
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
edit because probably you don't know how to use the code in an embadded script tag :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
jQuery
<script src="jquery.js"></script>
<script type='text/javascript'>
$( document ).ready(function() {
$('.YourContainer').css('background-image',
'url(../images/backgrounds/bc-image.jpg)');
});
</script>
</body>
</html>
Live Demo
Related
Here is working example https://www.codeply.com/go/bp/lxa0FF9yhw# that I need to work in one html file.
I am using this template to merge HTML, Css and javascript:
<html>
<head>
<style type="text/css">
CSS goes here
</style>
<script type="text/javascript">
JS goes here
</script>
</head>
<body>
HTML goes here
</body>
</html>
But as a result I see all lines of table instead of pages.
Is this a problem with Bootstraping? I am including jQuery and javascript
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script src='script.js' type="text/javascript"></script>
I still see all lines in a result. I tried this code in https://jsfiddle.net/tfyqwLkr/. It also shows all lines of table.
How to include all required elements in this case?
Try placing your Javascript just before the body end tag: </body>.
You might be calling DOM elements that haven't been parsed yet.
<html>
<head>
<style type="text/css">
/* CSS goes here */
</style>
</head>
<body>
<!-- HTML goes here -->
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script src='script.js' type="text/javascript"></script>
<script type="text/javascript">
// JS goes here
</script>
</body>
</html>
EDIT: After posting your code, looks like you are trying to call size(), a deprecated method since jQuery 3.0.
Note: This method has been removed in jQuery 3.0. Use the .length property instead.
That throws some errors in the console. Change children.size() to children.length.
Check the updated Fiddle. (Line 23)
I have a PHP based website. I need to add a JavaScript code in to the head. I would like to include the code in to a small JavaScript file and call it from within PHP page. The code starts with <script type="text/javascript"> and ends with </script>. So I tried to save the code in to code.js and in the head of my website's PHP code I put <script type="text/javascript" src="code.js" /> but it didn't work. I am wondering what am I doing wrong?
The content of the PHP page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following JavaScript code instead of the <!--head-->:
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the PHP code I inserted <script type="text/javascript" src="code.js" />
The problem is that you have inserted the tag script as a non-templated tag, here is the right form:
<script type="text/javascript" src="code.js"></script>
Obviously, if the .js is located in the right place, it will be loaded.
You haven't seen the tag in your code probably because you've inspected the HTML with an HTML inspector, but that tool is not always capable to show you malformed tags. For be sure to see the right HTML result, you must view the souce code (usually, right click on the web page via browser and "show source code" option is there).
The content of the php page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following javascript code instead of the <!--head--> :
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the php code I inserted <script type="text/javascript" src="code.js" />
I'm having a problem getting a dropdown image menu to display properly in my browser.
The code is as follows
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<style>
#webmenu{
width:340px;
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() { // makes sure the whole site is loaded
$("body select").msDropDown();
})
</script>
<select name="webmenu" id="webmenu">
<option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
<option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
<option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
</select>
</body>
</html>
I found the original code on github at http://jsfiddle.net/GHzfD/357/ but have not been able to reproduce it - am I making some kind of fundamental mistake?
The page is live at http://www.datatrouble.com/jquery_test.html
Missing msdropdown plugins
msdropdown and css
Include this code befor you call msdropdown
<link rel="stylesheet" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/css/msdropdown/dd.css">
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
in jsFiddle these external links are included too on the left panel here is snapshot .
Also read What is the difference between $(window).load and $(document).ready?
Update after OP's comment
You are placing msdropdown plugin before you have included jQuery file .
msdropdown is a jQuery plugin so jQuery file must be added before the plugin script is called.
So it should look like this:
put your scripts at bottom of the page and css at the top to improve page load speed.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body select").msDropDown();
});
</script>
I do not succeed in using Jquery with Symfony.
For information I use Jquery link provided by google.
in my twig file I have the following lines:
<!DOCTYPE html>
<html>
<head>
<title>my title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="{{ asset('/js/myjsfile.js') }}" type="text/javascript"></script>
</head>
<body>
<string class="changecolor red">HELLO<string>
</body>
</html>
in my myjsfile.js I have the following lines: (the file is in folders: Symfony/web/js)
$(document).ready(function(){
$(".changecolor").mouseenter(function(){
$(this).addClass("blue");
}
$(".changecolor").mouseleave(function(){
$(this).removeClass("blue");
$(this).addClass("red");
}
});
my css file is working fine so I do not put it here (just is .blue{color:blue};)
You haven't closed events methods parenthesis. Your JavaScript code should look as follows:
$(document).ready(function(){
$(".changecolor").mouseenter(function(){
$(this).addClass("blue");
});
$(".changecolor").mouseleave(function(){
$(this).removeClass("blue");
$(this).addClass("red");
});
});
Why are you using so old jQuery version? Why don't you make this effect using CSS :hover selector?
Some of my sites are fine but others I go to create from scratch like so:
<?php
define("NAME", "Terrasoft");
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?=NAME?></title>
</head>
<script href="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script href="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("#date").html(Date.parse("today"));
});
})(jQuery);
</script>
<style type="text/css">
#date {
font-weight: bold;
}
</style>
<body>
<div>
Welcome to the <strong>Terrasoft Development Server</strong>. This page was output at a system time of <strong><?=date("g:i:s A")?></strong> on <strong><?=date("F j<\s\u\p>S</s\u\p>")?></strong>. The current local time is <span id="date"></span>.
</div>
</body>
</html>
... and the script elements at the top do not get included and have no content inside Firebug. I am online—that's not the issue. I get jQuery is not defined. Any ideas? Thanks.
Script tags do not have the href attribute, use src.
<script src="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
You should be aware that href attributes are for <a> tags/anchor.
the src attribute specifies the URL of an external script file.
Note: Point to the external script file exactly where the script is written.
Syntax:
<script src="URL">