I have different images with different widths but the same height, i want to display them inline with text next to each images, i did that but in the responsive screen it doesn't look nice, how can i fix that? and if there is another way to write this code other than mine please help, here is my code:
.img{
min-width: 30%;
float: left;
}
.text{
font-size: 20px;
width: 70%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row text-center">
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<div class="img">
<img src="http://placehold.it/350x150" />
</div>
<div class="text">
<p>Test</p>
</div>
</div>
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<div class="img">
<img src="http://placehold.it/250x150" />
</div>
<div class="text">
<p>Test</p>
</div>
</div>
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<div class="img">
<img src="http://placehold.it/300x150" />
</div>
<div class="text">
<p>Test</p>
</div>
</div>
</div>
It would be better to use figure and figcaption.
Your question is not very precise, but this works well for me:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row text-center">
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<figure>
<img src="http://placehold.it/350x150">
<figcaption>Text</figcaption>
</figure>
</div>
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<figure>
<img src="http://placehold.it/250x150">
<figcaption>Text</figcaption>
</figure>
</div>
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<figure>
<img src="http://placehold.it/350x150">
<figcaption>Text</figcaption>
</figure>
</div>
</div>
Use below code snippet. It looks good in responsive screen as well.
Use Css:
div{overflow:hidden}
<div class="row text-center">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<figure>
<img src="https://placehold.it/350x150">
<figcaption>Text</figcaption>
</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<figure>
<img src="https://placehold.it/250x150">
<figcaption>Text</figcaption>
</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<figure>
<img src="https://placehold.it/300x150">
<figcaption>Text</figcaption>
</figure>
</div>
</div>
Related
Actually i have two side like col-md-6 & col-md-6 & i have six images inside left side and right side i need only one images like given below code.
This is working fine but i need expand left six column in full width when right side image will not be available. how cann i manage this?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-4" style="background-color:yellow;">img</div>
<div class="col-4" style="background-color:orange;">img</div>
<div class="col-4" style="background-color:blue;">img</div>
<div class="col-4" style="background-color:red;">img</div>
<div class="col-4" style="background-color:lime;">img</div>
<div class="col-4" style="background-color:indianred;">img</div>
</div>
</div>
<div class="col-6 p-0">
<div class="col-12" style="background-color:green; height:48px;">img</div>
</div>
</div>
</div>
I Want like as given below code if right col-md-6 will be not available:-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-2" style="background-color:yellow;">img</div>
<div class="col-2" style="background-color:orange;">img</div>
<div class="col-2" style="background-color:blue;">img</div>
<div class="col-2" style="background-color:red;">img</div>
<div class="col-2" style="background-color:lime;">img</div>
<div class="col-2" style="background-color:indianred;">img</div>
</div>
</div>
</div>
</div>
Answer will be appreciated!
Replace col-6 with col
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-4" style="background-color:yellow;">img</div>
<div class="col-4" style="background-color:orange;">img</div>
<div class="col-4" style="background-color:blue;">img</div>
<div class="col-4" style="background-color:red;">img</div>
<div class="col-4" style="background-color:lime;">img</div>
<div class="col-4" style="background-color:indianred;">img</div>
</div>
</div>
<div class="col p-0">
<div class="col-12" style="background-color:green; height:48px;">img</div>
</div>
</div>
</div>
here's the issue:
Using Bootstrap 3.3.7
I have 6 images (3 icons and 3 progress bars) and wish to have the 2 last ones go to the next line when reducing the window size from col-lg to col-md (making my site as responsive as possible.) The issue is that it does not, here's the code:
<!DOCTYPE html>
<html>
<head>
<!-- Boostrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<section>
<div class="container langages" id="skills">
<div class="row iconskills">
<!-- HTML -->
<div class="col-xs-6 col-sm-offset-1 col-sm-1 col-md-offset-1 col-md-1 col-lg-offset-1 col-lg-1">
<img class="logohtml" src="img/logos/html5.png" alt="logo html5" />
</div>
<div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3"></div>
<!-- CSS -->
<div class="col-xs-6 col-md-offset-2 col-md-1 col-lg-offset-0 col-lg-1">
<img class="logocss" src="img/logos/css32.png" alt="logo css3" />
</div>
<div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3"></div>
<!-- BOOTSTRAP -->
<div class="col-xs-6 col-sm-1 col-lg-1">
<img class="logobs" src="img/logos/bootstrap.png" alt="logo bootstrap" />
</div>
<div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2"></div>
</div>
</div>
</section>
<footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</footer>
</body>
</html>
I added 2 screenshots showing what is happening:
Before
After
What is strange is that bootstrap has a grid made of 12 columns, when I check in my divs in col-md I have those 12 columns in my first 4 divs (which is what I want since I want the 2 last to go to the next line) but the behavior is not what I'm expecting.
I'm probably missing something obvious but help would be great, thanks !
Don't hesitate if I'm not clear or missing some infos.
I think you are trying to achieve below layout. My views are that you should get familiar with bootstrap built in components(classes). I have changed little bit code of yours, you can further edit it and reference your correct path for images.
Bootstrap 3.3 : https://getbootstrap.com/docs/3.3/components/
Some reference css links that I have used in build
Progress bar : https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp
Grid : https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Image responsive : https://www.w3schools.com/bootstrap/bootstrap_images.asp
HAPPY CODING : All the best for you resume, do share the link once it is completed.
<!DOCTYPE html>
<html>
<head>
<!-- Boostrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<section>
<div class="container langages" id="skills">
<div class="row iconskills">
<!-- HTML -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logohtml" src="./img01.png" alt="logo html5" />
</div>
<div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
<!-- CSS -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logocss" src="./img01.png" alt="logo css3" />
</div>
<div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
<!-- BOOTSTRAP -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logobs" src="./img01.png" alt="logo bootstrap" />
</div>
<div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>
Thanks a lot for your answer!
The simple fact of adding a new div around each languages helped me sort my problem out!
Thanks again!
screenshot
i try to fix it but still like this please help me to fix it
i'm try change gid but still get the problem
please give me any idea about this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
<p style="background-color:#fff;">Example headline.</p>
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
</div>
</body>
</html>
you need to use display:flex;flex-wrap:wrap on row so all the columns have equal height, regardless if they have a headline or not
see snippet below or jsFiddle
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap:wrap;
}
.col-sm-4 {
width:33.33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
<p style="background-color:#fff;">Example headline.</p>
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
</div>
</div>
I am having a problem with trying to implement specific JQuery effects into a Bootstrap framework (with its already HUGE CSS that is creating problems).
I have created a sterile, test file called testjquery.html which works fine, connected to a stylesheet that defines a hidden element, and then activates the fade in of this element via JQuery. Here is CSS:
#homepageframex > div > h1 {
display: none;
width: 250px;
margin; 20px;
z-index:100;
}
And here is the HTML that connects to this CSS which works fine:
<!DOCTYPE html>
<!-- BEGIN HTML Document -->
<!-- BEGIN Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customstylesheet.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<!-- END Head -->
<!-- BEGIN Body -->
<body>
<p>Fade In</p>
<div id="homepageframex">
<div><img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
<script type="text/javascript">
(function( $ ) { // closure to prevent JQuery conflicts
$('.fadein-link').click(function(){
$('#homepageframex div h1').fadeIn(3000);
});
})(jQuery);</script>
</body>
<!-- END Body -->
<!-- END HTML Document -->
</html>
Now this works fine. The problem is when I try to implement this same code into a very complicated Bootstrap layout:
<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
<div class="container">
<div class="row-fluid">
<div id="content" class="col-xs-12 text-center">
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe1 -->
And here is the corresponding JQuery code and CSS code changed for the nested DIV tags - but this doesn't work!! Does anyone know why?
<script type="text/javascript">
(function( $ ) { // closure to prevent
$('.fadein-link').click(function(){
$('#homepageframex div div div h1').fadeIn(3000);
});
})(jQuery);</script>
#homepageframex > div > div > div > h1 {
display: none;
width: 250px;
margin; 20px;
z-index:100;
}
Can anyone help and let me know why this is not working for me? What is it that is conflicting?
Thanks.
And here is the complete code of page that is not working:
<!DOCTYPE html>
<!-- BEGIN HTML Document -->
<!-- BEGIN Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customstylesheet.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<!-- END Head -->
<!-- BEGIN Body -->
<body>
<!-- BEGIN NAV BAR -->
<div id="navigationbartop" class="pad-section">
<div class="container" style="background-color: #FFFFFF;">
<div class="row">
<div class="col-xs-10 text-center"></div>
<div class="col-xs-1 text-center">
<p class="gillsanslight20pt" style="color: #3c3c3b;">About</p>
</div>
<div class="col-xs-1 text-center">
<p class="gillsanslight20pt" style="color: #3c3c3b;">Contact Us</p>
</div>
</div>
</div>
</div>
<!-- END NAV BAR -->
<!-- BEGIN HEADER -->
<!-- <header> -->
<!-- BEGIN container for HEADER DIV -->
<!-- BEGIN DIV for top header DIVs -->
<div id="headerdivs" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<span class="logotop"><img src="images/logo.png" height="200" width="168" alt="" /></span>
</div>
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<p>Fade In</p>
</div>
</div>
</div>
</div>
<!-- END DIV for top header DIVs -->
<!-- END container for HEADER DIV -->
<!-- </header> -->
<!-- END HEADER -->
<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
<div class="container">
<div class="row-fluid">
<div id="content" class="col-xs-12 text-center">
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe1 -->
<!-- BEGIN DIV for arrow down1 -->
<div id="arrowdownX" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down1 -->
<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
<div class="container">
<div class="row">
<div id="testimage1" class="col-xs-12 text-center">
<img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
<p id="testtext1" class="gillsanslight40pt" style="color: #FFFFFF;">
Test text here also
</p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe2 -->
<!-- BEGIN DIV for arrow down2 -->
<div id="arrowdown2" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down2 -->
<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
<div class="container">
<div class="row">
<div id="testimage2" class="col-xs-12 text-center">
<img src="images/photo2.jpg" height="3000" width="1655" alt="" class="img-responsive" />
<p id="testtext2" class="gillsanslight40pt" style="color: #FFFFFF;">
Test text three
</p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe2 -->
<!-- BEGIN DIV for arrow down3 -->
<div id="arrowdown3" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down3 -->
<!-- BEGIN DIV for homepageframe4 -->
<div id="homepageframe4" class="pad-section">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe4 -->
<!-- BEGIN DIV for arrow down4 -->
<div id="arrowdown4" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down4 -->
<!-- BEGIN DIV for homepageframe5 -->
<div id="homepageframe5" class="pad-section">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe5 -->
<!-- BEGIN DIV for homepageframe7 -->
<div id="homepageframe7" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<img src="images/logo_bottom.png" height="380" width="320" alt="" class="img-responsive" />
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe7 -->
<!-- BEGIN FOOTER -->
<footer>
<!-- BEGIN container for NEWSLETTER DIV -->
<div class="container">
<!-- BEGIN DIV Newsletter -->
<div id="newsletterX" class="pad-section">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h3 class="gillsanslight28pt">Leave your e-mail address to find out more</h3>
</div>
<div class="col-sm-12 text-center" style="color: red;">
<form class="form-horizontal">
<!-- BEGIN DIV for Form Group Line 2 -->
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-7">
<span><input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
<div class="col-xs-1">
<input type="image" src="images/send.png" height="38" width="52" alt="Send" class="mybutton"></span>
</div>
<div class="col-xs-2">
</div>
</div>
<!-- END DIV for Form Group Line 2 -->
</form>
</div>
</div>
</div>
</div>
<!-- END DIV Newsletter section -->
</div>
<!-- END container for NEWSLETTER DIV -->
</footer>
<!-- END FOOTER -->
<!-- BEGIN JavaScript that WORKS rebuilt from individual parts from above script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery.scrollmagic.js"></script>
<!-- <script src="js/main.js"></script>This causes the Google Map to disappear -->
<!-- END JavaScript that WORKS -->
<!-- BEGIN JavaScript for Font -->
<script type="text/javascript">
var MTUserId='5b20f3d6-ea3d-4870-9117-9e155b029f7b';
var MTFontIds = new Array();
MTFontIds.push("693341"); // Gill Sans® W01 Light
MTFontIds.push("692628"); // Gill Sans® W01 Roman
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src=('https:'==document.location.protocol?'https:':'http:')+'//fast.fonts.net/lt/trackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
<!-- END JavaScript for Font -->
<script type="text/javascript">
(function( $ ) {
$('.fadein-link').click(function(){
$('#content').fadeIn(3000);
//$('#c div').css({
// width:1000,
// height:1000,
});
});
})(jQuery);</script>
</body>
<!-- END Body -->
<!-- END HTML Document -->
</html>
I just set up a bootply with your code - Bootply - and it's working after removing the
'closure to prevent' comment from
(function( $ ) { // closure to prevent
I've added a <div class="fadein-link">fade in</div> to trigger the fade-in.
Update:
To summarize additional information from comments after the complete html having the issue was added in the OP: jquery was included twice, once in the header (as js/jquery.min.js so it's not possible to know which version), and once in the footer as <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>.
Though it's possible to use different versions of jQuery - for details check http://api.jquery.com/jquery.noconflict/ - it's not recommended and maybe isn't necessary at all. It could be necessary to use 2 different jQuery versions. e.g. if included plugins would only work with a specific version, but this doesn't seem to be the case. Removing one of the jquery.js includes didn't solve the issue.
If not already done, I recommend to check if there are any javascript errors by opening the web developer tools, as previously there must have been some errors because of e.g. additional closing )}; which was already removed.
If unfamiliar with web dev tools, find some details for Firefox here: https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console
Additional test could be to include the jquery/jquery.ui/bootstrap version from the working bootply instead of the current includes:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Aside - Because OP is new to SO - extended discussions should be avoided, for details https://meta.stackexchange.com/questions/95937/why-must-we-avoid-discussions-in-comments. It's possible to move such an extending discussion from the comments to chat, but it's necessary to have at least 20 reputation for that. Just as explanation as I'm deleting some of my comments to clean this up (which OP could do, too).
I have just recently started developing websites and facing some issues. I am trying to include a jquery plugin into my html which is a thumbnail carousel bar. My issue is that the jq function is not being called. I tried using other plugins but facing the same issue.
Here is my code. thanks
<!DOCTYPE html>
<html>
<head>
<script src="/media/js/jquery-ui.min.js"></script>
<script src="/media/js/css3-mediaqueries.js"></script>
<script src="/media/js/fwslider.js"></script>
<script type="text/javascript" src="/media/js/jquery1.min.js"></script>
<script type="text/javascript"> // this junction is working
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</script>
<script src="/media/js/jquery.easydropdown.js"></script> // this junction is working
<script type="text/javascript" src="/media/js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function () {
hoverEffect: function () {
// code on animation which is working
}
});
</script>
</head>
<body>
<!-- header-section-starts -->
<div class="header">
<div class="top-header" ><!--to work on style="position:fixed; width:100%; top: 0px; z- index:0;"-->
<div class="container">
<!-- navbar code -->
<script><!--script-nav-->
$("span.menu").click(function(){
$(".top-menu ul").slideToggle("slow" , function(){
});
});
</script>
</div>
</div>
<div id="fwslider">
<div class="slider_container">
<div class="slide">
<img src="/media/images/banner.jpg" class="img-responsive" alt=""/>
</div>
<div class="slide" id="Home">
<img src="/media/images/banner1.jpg" class="img-responsive" alt=""/>
</div>
</div>
<div class="timers"></div>
<div class="slidePrev"><span></span></div>
<div class="slideNext"><span></span></div>
</div>
</div>
<!-- header-section-ends -->
<!-- content-section-starts -->
<div class="content">
<div class="container">
<div class="about-section-left-grid">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="/media/images/tiger1.jpg" class="img-responsive" alt="" />
</li>
<li>
<img src="/media/images/pic2.jpg" class="img-responsive" alt="" />
</li>
</ul>
</div>
</section>
<script defer src="/media/js/jquery.flexslider.js"></script>
<script type="text/javascript"><!-- this works -->
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</div>
</div>
<!-- here my div block for thumbnail starts------------------------------------------------ -->
<div class="container-fluid" style="padding:0;">
<div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
<!-- Wrapper for slides -->
<div class="controls">
<ul class="nav">
<li data-target="#custom_carousel" data-slide-to="0" class="active"><small>INDIVIDUAL LESSONS</small></li>
<li data-target="#custom_carousel" data-slide-to="1"><small>PLAYER DEVELOPMENT PROGRAM</small></li>
</ul>
</div>
<script><!--This fuction is not being called. its taken from a jq plugin for thumbnail carousel -->
$(document).ready(function(){
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel .controls li.active').removeClass('active');
$('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
</script>
<div class="carousel-inner">
<div class="item active">
<div class="container-fluid" style="background-color:#282B30;">
<div class="row" >
<div class="col-md-12">
<article style="position: relative; width: 100%; opacity: 1;">
<div class="col-md-4 clients-image">
<img src="/media/images/beauty.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-8 clients-text">
<p>claritatem</p>
</div>
</article>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid" style="background-color:#282B30;">
<div class="row" >
<div class="col-md-12">
<article style="position: relative; width: 100%; opacity: 1;">
<div class="col-md-4 clients-image">
<img src="/media/images/beauty.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-8 clients-text">
<p>claritatem</p>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div><!-- End Carousel Inner -->
</div><!-- End Carousel -->
</div><!-- End content -->
</body>
</html>