I am having an issue getting tabs to open based on the selection I am choosing. In the snippet you will see 4 boxes. If you click on box 1, I am wanting #marketing1 to open below it and so on.
The method I am using is to get the specific id of the button selection (the 1,2,3,4 box) and then declare a variable to just get the number. Then to add that number to the id of #marketing to show the appropriate section. I am not sure what I am doing wrong. No errors are showing.
Ps - I am also trying to add an .active class to the #marketing-service for when one of the selection boxes is clicked on to show my the active class (it creates a down arrow under the box. Am I implementing the .active wrong to the :before and :after?
//For tabs to stay active
$('.marketing-service').click(function() {
$('.marketing-service.active').removeClass('active');
$(this).toggleClass('active');
//To get the service display box to show
var item_number = $(this).attr('id').replace('marketing-tab', '');
/* $('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);*/
$('#marketing'+item_number).show().siblings('.marketing-section-wrap').hide();
});
.marketing-section-wrap, .marketing-section-wrap-main {
width: 100%;
height: auto;
padding: 80px 0;
border-bottom: 1px solid #EBEBEB;
}
.marketing-section-wrap {
display: none;
}
#marketing-services {
width: 95%;
margin: 0 2.5%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 1%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
/*-- Down Arrow for boxes --*/
.marketing-service:after.active, .marketing-service:before.active {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service:after.active {
border-width: 0px;
margin-left: 0px;
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
margin-top: -30px;
}
.marketing-service:before.active {
border-color: #FFF;
border-top-color: #88b7d5;
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">1</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">2</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">3</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">4</h2>
</div>
</div>
</div>
<div id="marketing1">
<div class="marketing-section-wrap">
1
</div>
</div>
<div id="marketing2">
<div class="marketing-section-wrap">
2
</div>
</div>
Quite simple just try $('#marketing'+item_number).children().show() because marketing-section-wrap is display:none;
first run this to hide all marketing-section-wrap
$('.marketing-section-wrap').hide();
then this will show only the one which corresponds to this click.
$('#marketing'+item_number).children().show();
Related
I've learned the basic of HTML5, CSS and a little of JS.
I'm trying to make a site where I can show my projects and knowledge.
The thing is, I want to put 2 JS games that I made in the page, but I don't want them to load instantly with the page. so, I would like it to load only when I click on it.
The game: https://editor.p5js.org/snufupugos/full/jm8j5k5pC
How I got it on the page:
<section class="games"> <iframe src="https://editor.p5js.org/snufupugos/embed/jm8j5k5pC" class="freeway" title="Remake Freeway"></iframe> </section>
The CSS:
.freeway{
background-color:rgba(0, 0, 0, 0.1);
width: 500px;
height: 400px;
margin: 2em auto;
border: 2px solid #801edb;
border-radius: 50px;
border-width: thick;
padding: 5px 5px;
}
My first Idea was to use an image, and then the hover to transform to the iframe, but I think it is not possible since it did not work.
Anyway, can someone help me with this? Any Idea how to do it?
Thank you.
function start(){
document.getElementById("frame").src = "https://editor.p5js.org/snufupugos/embed/jm8j5k5pC";
document.getElementById("imgs").remove();
var news = document.createElement("img");
news.setAttribute('id', 'stop');
news.setAttribute('onclick', 'stop();');
news.setAttribute('class', 'button');
news.setAttribute('width', '25px');
news.setAttribute('src', 'data:image/png;base64,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');
var element1 = document.getElementById("top");
element1.appendChild(news);
}
function stop(){
document.getElementById("frame").src = "";
document.getElementById("stop").remove();
var neww = document.createElement("img");
neww.setAttribute('id', 'imgs');
neww.setAttribute('onclick', 'start();');
neww.setAttribute('class', 'button');
neww.setAttribute('src', 'data:image/png;base64,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');
var element = document.getElementById("center");
element.appendChild(neww);
}
.border{
width: 500px;
height: 400px;
margin: 2em auto;
position: relative;
z-index: 9999999999;
}
.freeway{
width: 500px;
height: 400px;
background-color:rgba(0, 0, 0, 0.1);
border: 2px solid #801edb;
border-radius: 50px;
border-width: thick;
}
.show{
display: block;
}
.container {
position: absolute;
text-align: center;
z-index: -1;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
cursor: pointer;
border: none;
}
.top-right {
position: absolute;
top: 11px;
right: 40px;
}
<section class="games">
<div class="border">
<div class="container">
<iframe src="" id="frame" class="freeway"></iframe>
<div id="top" class="top-right"></div>
<div id="center" class="centered">
<img class="button" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAFVCAMAAACuDacRAAAAA3NCSVQICAjb4U/gAAAADFBMVEUAAABHcEwAAAAAAACg4dfFAAAABHRSTlMzACMSHB03/AAAAF96VFh0UmF3IHByb2ZpbGUgdHlwZSBBUFAxAAAImeNKT81LLcpMVigoyk/LzEnlUgADYxMuE0sTS6NEAwMDCwMIMDQwMDYEkkZAtjlUKNEABZgamFmaGZsZmgMxiM8FAEi2FMk61EMyAAAKJElEQVR4nO2d63rbOAxEbev933ndZJvGEiUCEkBxMHO6P/p1HYnhHAL0TXo8BTWPuwcg7kUCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoAcCUCOBCBHApAjAciRAORIAHIkADkSgBwJQI4EIEcCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoAcCUCOBCBHApAjAciRAORIAHIkADkSgBwJQI4EIEcCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoAcCUCOBCBHApAjAciRAORIAHIkADkSgBwJQI4EIEcCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIIRZgWZbX8nr/9/7LcvdgboNQgHfur8frseL9T28Z7h7beKgE+Iq+w9sCKg1oBLCEzygBhwCO8P9JcPegx0AgwLJ4w/+R4O6hD6C8AIt77X8oUL4V1BbgWvoUDpQWICD+R/XdQF0BIlb/jwN1q0BVASLjL61AUQGC4/9S4O7fKYeSAljjf329AsytQEEBuk/72y/6L+9/7slQsA/UE+AwxN6LvL0XjOsVgWoCHC1/6yv8hxvIakWgmAD70TmD2z9QsSJQSoC95X/qjf7dZlDrGWElAXbyPx/YngKVDCgkQDutixU75aAzUUeApHLd3hHWMaCKAM2cYrp14qEnoIgAzfYfllHu0e+lhgCthEIDSj/BbZQQoBFPdIlu9YESBlQQoJF/QjZjzjKcAgJs12bSHn3YiUaCL8B2ZabFsjUAvwbAC7DNPzGUoScbA7oAm0iSn6CXMwBcgG3+2WdctwH0V4TABdjEUfKUmWAL0AljSQmnlgHQAqyjWFfjJadFlzIAWYD1BmATxJK0S+uJhwSyAN2FuGRt09YGhJ9gHMBjf/Xy/ykR8TW6f24UcAUwZPCvR4RXgTIGwAqwGBL49Zjwr/iuDIDdBsAK8BnAzgo3POQsFgERQBVgtQB3HrUKKfMzIqgGoApgK8CPFaEKrAwIPPJIQMe9agB7D1sLENurjYOYG0wBrFO/FSBSgdXHxDD3gZgCWCNtCRDYByo0AchRm2tvU4BABQqUAEgBzAtvR4C4ho1fAhAH/TLP+q4AUQosCcccC6IA9kk/ECCoD9hlnBTAMb/sMR4JEKMAfAnAE8Az5ccChCjwqePlww0HXIDOjPcEiIgMvATgCfAx4Z0V3Bfg+tuEHiEnBE6Azw7QebBBgL5FPSKPNR44AV6e6bYJcHErgF0C4ARwzbZRgGu5fb4lcOFAt4A2YN+m2yzAJQWgnwigCfARmu/RPc73Ad+g5gJsvM5+6xLg/FbAtS+ZDDABnO3WJ8B5BXxaTgWwAIaZ9gpwNj4JMIiPDmBYrX4BzgXoHddEYAngbbZnBDjTByTAIJwd4JwAjxM7ee/A5gFLgIdzns8K4K4CuK8FQY3WXWlPC+Bdx7g9AEoAd6G9IIBTAdgeACWAO55LArj6gAQYwe90TOFcE8CjwEcPOP8bjgdpsP5JviqAYzX//iGkTQCSAP6t9nUBzApIgHz8fTZCAGOeqJsAVAFsiyxGANNW4Hd/kgA5uFdllACWSFF3gUBjPTHFYQI4P30EtAmQAFEKSIBsTnTZUAE6uUqAbE7ss4MFONwN+reoUyABohQAfR4IKoBxicULsB8u6PNACeCnfXIJkM00ArRPLwGy6S/Cwx8JpbEVkADZzCTA3t0p/hL9u+eBNNSpBNjeoEgCJDObACsDJEA2kwmw3gZIgGzmEkB7gOHMJMDBDYokQBbzCNB8PVgCZDONAO1n+XodIJtJXgnceztIAmQzhwC7Z5YA2cwgwEGyejs4m/s/D3D46WB9ICSb2z8SdhyrKkA2N1eA3intqkwFkAC3fiq4/90QCZDNnQI4r0ckAVK476thhlOBPguUAIb4TeeSAPnc8+1gYzkHfRIAK8Co6wOYu/nvH5IAOYy/QojjKkGnrJkAJAGGXyPo5EWisOb07gF4+Fic3h9wo8vETcfI6wQ6U5QAIxh4pVBnG9eVQsfgXaJn43evYdgtAJgAY64WfqKEw3YAYAHSbhhxooLjdgAwAQbcMeTU+pUAo0i+adTZ8h1wiLtAFqC/1Lz5n1y8yDePBRMg976BZ0el+waO4yMx36N78cfcORSsAMAJkHbv4AsLV/cOHomrBNiX/7AhzQbcgF391hr/pb6NvAUEFOBjunujt+V/cdsWeazxwAngKgGm5X9xPNgFAF2AzvAN8V9esqE2jQdPAM+Md/O/XrE9Ps4I4JA/n3WZL+HeWv7XB7NEH3A0gAI4SsBx/BEbNvQCACnA56QfxXiUf8h+fYk/5GAQBbCXgIPlnzASzLm8ewBneFmz3I0/aK3aa9G0QApgnvid/KOSgt8BPmsIsD/z7eUfNowcrcaCKYDVgMTqbx/E3IAKYFx8edX/uW4AsBN59wBO8jLlmlf9N/ljNgBcAdb1tz3/q/wjz7/KH7QBAAtgCiBxjdpK0PzACrBOoGlAv0YEnR02f2ABLAZkxW+yDwNgAdYdvpHC3/8THdAqf+hJvHsAF1i6BuQs/03+uA0AW4BNEBsDcuLpnhYJaAG6UaSszlL5gwvQCyMjnFr5owuw3gasb+YYf8Z1/tAbgCe8AA0DcgMZfLp80AXYGpC5JDfLH339FxCgYUBaVy6YfwEBhhmwVMy/ggANAzKSGXOW4VQQoJVN9OassfxL5F9DgJYBsX2gEX+N/IsI0DYgLKHW0YvkX0WAZokOUqB96Igjz0AVAdpVOkCBZvx18i8kQNuAi+/Vt+MvlH8lAdqt+kIVWHbir9L+v6gkwN56PXkB6MiDzUspAXbbgL9qhx1odooJcHhJgNdiuwXk7tovt/yfBQU4WLt/8nsdJ7i8H3D486N+i2HUE2C/ef+2YKPB0su+4vJ/lhSgUwQ+Ev36Y6Vg/EUFcChgp171/6KoAP0+4I2/5PJ/1hUgVoGy8VcW4BnWCIoW/29KC/BW4LID4d8rnIziAlxVoHDt/5/yAjx33yTqUz79J4cAzzN1oHrp/wuJAN+v9NnDt71rUAEaAf5gkYAp/D9QCfDNtwabL/k+Ou8TFYVQgB+WtwrvP3+4eyj3wSyAeEoAeiQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoAcCUCOBCBHApAjAciRAORIAHIkADkSgBwJQI4EIEcCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoAcCUCOBCBHApAjAciRAORIAHIkADkSgBwJQI4EIEcCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoAcCUCOBCBHApAjAciRAORIAHIkADkSgBwJQI4EIEcCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoCc/wCWo4SRUj71hwAAAABJRU5ErkJggg==" onclick="start();" id="imgs"/>
</div>
</div>
</div>
</section>
<script>
window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
</script>
Try this!
I have 2 blocks for user to choose from and they should be interactive. The block changes the color and the vertical line color should be changed to opposite. I wonder if I could make it right in the same code snippet which does the color change of the code block, because previously I made it, but with another for loop and it's not the fastest way.
let vanOption = document.getElementsByClassName("van-quote-option");
let quoteVl = document.getElementById("option-vl");
// Van option selection
for (var x = 0; x < vanOption.length; x++) {
vanOption[x].addEventListener("click", function() {
var currentOption = document.getElementsByClassName("option-active");
if (currentOption.length > 0) {
currentOption[0].className = currentOption[0].className.replace(" option-active", "");
}
this.className += " option-active";
});
}
.van-quote-option {
display: flex;
justify-content: space-evenly;
margin: 25px 165px 20px 165px;
border: 1px solid grey;
cursor: pointer;
transition: 0.5s;
}
.option-active {
background-color: #18A063;
color: #fff;
}
.quote-vl {
border-left: 2px solid #13985C;
height: 116px;
}
.quote-vl-active {
border-left: 2px solid #fff;
height: 116px;
}
.quote-icon {
margin: 25px 0 0 35px;
}
.quote-van-icon {
font-size: 49px;
padding: 8px;
border-radius: 50%;
height: 60px;
background-color: rgb(245, 245, 245);
color: #18A063;
}
.quote-car-icon {
font-size: 49px;
padding: 9px;
height: 52px;
background-color: rgb(245, 245, 245);
color: #18A063;
border-radius: 50%;
}
.quote-bicycle-icon {
font-size: 49px;
padding: 10px;
height: 55px;
background-color: rgb(245, 245, 245);
color: #18A063;
border-radius: 50%;
}
.quote-p {
text-align: left;
}
.quote-p-van {
text-align: left;
margin-top: 5px;
}
.bicycle-quote-vl,
.car-quote-vl {
height: 124px;
}
.quote-price {
display: flex;
flex-direction: column;
justify-content: center;
}
.quote-price-van {
margin-top: 10px;
}
.van-send-price,
.car-send-price,
.bicycle-send-price {
font-size: 25px;
font-weight: 700;
}
.van-send-price::before,
.car-send-price::before,
.bicycle-send-price::before {
content: "\00A3";
}
<div class="quote-options">
<div class="van-quote-option option-active">
<div class="quote-icon quote-icon-1">
<i class="fas fa-truck quote-van-icon"></i>
</div>
<div class="quote-p-van">
<div class="quote-p-1">Sending 1 or 2 items (with van)</div>
<br />
<div class="quote-p-2">
We'll take a maximum of 2 items for you<br />
to deliver immediately at any location.
</div>
</div>
<div class="quote-vl quote-vl-active"></div>
<div class="quote-price-van">
<span class="van-send-price" id="van-deliver-price">14</span><br />
For a max.<br />
of 2 items.
</div>
</div>
<div class="van-quote-option">
<div class="quote-icon quote-icon-1">
<i class="fas fa-truck quote-van-icon"></i>
</div>
<div class="quote-p-van">
<div class="quote-p-1">Hire a van</div>
<br />
<div class="quote-p-2">
We'll take a maximum of 2 items for you<br />
to deliver immediately at any location.
</div>
</div>
<div class="quote-vl"></div>
<div class="quote-price-van">
<span class="van-send-price" id="van-deliver-price">38</span><br />
Hire a van,<br />
∞ items
</div>
</div>
</div>
You can fix this with css.
You don't really need the quote-vl-active class. Remove it.
You can refer to the vertical line when it's active using option-active since it's the child of that element.
.option-active > .quote-vl {
border-left: 2px solid white;
height: 116px;
}
See this fiddle: https://jsfiddle.net/29r1v0Lo/
might want to use onclick vs. adding listeners as well.
Here is a jsfiddle of it a bit cleaner and with the vert bar having the opposite color: https://jsfiddle.net/7L0uzkxj/
You can just have the CSS control the vert bar:
.quote-vl {
border-left: 2px solid green;
height: 116px;
}
.option-active .quote-vl {
border-left: 2px solid white;
height: 116px;
}
You can then clean up the JS to look like this:
function triggerMe(evt) {
let vanOption = document.getElementsByClassName("van-quote-option");
[...vanOption].forEach(x => {
if (x.classList.contains('option-active')) {
x.classList.remove('option-active');
}
})
evt.classList.toggle('option-active');
}
I have the following code where I added a plus symbol to one of my service titles. I was informed by someone that when that service is clicked on I should have a minus sign take its place to show that it can be minimized. I am unsure of how to swap out the plus sign when the description has been expanded. Does anyone have any ideas of how I could do that?
Here is a snippet. Click on one of the service names to see the description expand.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">
<img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
Here is the working example, i change a little de html and Js
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
var t = $(this);
if(t.hasClass('open'))
{
t.removeClass('open');
t.find('.status').html("+");
}else {
t.addClass('open');
t.find('.status').html("-");
}
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
the working example
I'd suggest simply toggling a class to achieve this.
You can add the icon as a background image of a pseudo element inserted into the .service_title element. Then you can simply toggle a class in order to change the icon. Update the background image URLs accordingly. See the updated example for the modified jQuery; it's still only 5 lines.
The relevant CSS:
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
Updated Example:
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
You could just change it within your click binding...
Let's say your using images, just add a data-attribute you can query when you need to, like this...
HTML
<div class="service_wrapper">
<img data-state="plus" class="state" src="plus.png" alt="More"/>
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
JS
$('.service_wrapper').click(function() {
var state = $(this).find('.state');
if(state.data('state') == 'plus')
state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
else
state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});
I am creating a slideshow with 3 images of width 700px and I want to set the image 'left' position of each image from jquery, so that the images slide in, showing the current image and hiding the other images.
Here is the code.
$(document).ready(function() {
//calculating the no. of photos using each funct. Each func will detect the total imgs.
$('.marquee_container .slide').each(function(index) {
//setting the photowidth according to the container width
var photoWidth = $('.marquee_container').width();
//calculating the photoposition
var photoPosition = index * photoWidth;
//setting the left position of the photos
$('.slide').css({
'left': photoPosition
});
//caculating the width of the div depending on the photos
$('.holder').css({
'width': photoWidth + photoPosition
});
});
//generating navigation links
//calculating the no. of marquee_photos divs using the each func
//appending html code inside the marquee_nav
//the marquee_nav links will appear according to the number of marquee_photos divs, using the each function
$('.slide').each(function(index) {
$('.marquee_nav').append('');
});
});
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
}
.holder {
overflow: hidden;
position: relative;
width: 700px;
height: 350px;
}
.slide {
position: absolute;
top: 0px;
left: 0px;
}
.marquee_photos {
overflow: hidden;
}
.marquee_photos img {
display: block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav {
position: absolute;
bottom: 5px;
right: 0;
}
.marquee_nav .marquee_nav_item {
color: #fff;
text-decoration: none;
background: url(images/template/nav_buttons.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
display: block;
width: 17px;
height: 18px;
float: left;
margin: 0 4px;
}
.marquee_nav .marquee_nav_item:hover {
background: url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item:selected {
background: url(images/template/nav_buttons.png) no-repeat -50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>
I am able to add the width dynamically but all the images left position are equal to the last image i.e. left:1400
From js you can see that I have calculated each photo position using index but I am still not able to get the result.
TLDR
You are misusing .each() loop.
To access a value inside of .each() loop you have to use value argument.
$('.marquee_container .slide').each(function (index, value) {
console.log($('.slide')); // All slides on the page.
console.log($(value)); // A value for current iteration
});
Detailed explanation
Sizzle selector engine, used in jQuery returns a collection of matched elements, when you specify a class, and your DOM contains multiple elements with this class.
By calling .each(callback) on a jQuery Collection, you basically tell JavaScript to call callback function for every element in collection. The callback function accepts two arguments: index, value
Where index — current index in array or object, value — a single value from your collection.
By applying $('.slide').css(), you change CSS properties of all elements from collection. To assign a specific position for each element, you need to interact with every separate element by accessing $(value).
Fixing
Please try this demo with your images:
$(document).ready(function() {
//calculating the no. of photos using each funct. Each func will detect the total imgs.
$('.marquee_container .slide').each(function(index, value) {
//setting the photowidth according to the container width
var photoWidth = $('.marquee_container').width();
//calculating the photoposition
var photoPosition = index * photoWidth;
//setting the left position of the photos
$(value).css({
'left': photoPosition
});
//caculating the width of the div depending on the photos
$('.holder').css({
'width': photoWidth + photoPosition
});
});
//generating navigation links
//calculating the no. of marquee_photos divs using the each func
//appending html code inside the marquee_nav
//the marquee_nav links will appear according to the number of marquee_photos divs, using the each function
$('.slide').each(function(index) {
$('.marquee_nav').append('');
});
});
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
}
.holder {
overflow: hidden;
position: relative;
width: 700px;
height: 350px;
}
.slide {
position: absolute;
top: 0px;
left: 0px;
}
.marquee_photos {
overflow: hidden;
}
.marquee_photos img {
display: block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav {
position: absolute;
bottom: 5px;
right: 0;
}
.marquee_nav .marquee_nav_item {
color: #fff;
text-decoration: none;
background: url(images/template/nav_buttons.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
display: block;
width: 17px;
height: 18px;
float: left;
margin: 0 4px;
}
.marquee_nav .marquee_nav_item:hover {
background: url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item:selected {
background: url(images/template/nav_buttons.png) no-repeat -50px 0;
}
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>
The below shown is the format of my html code. In the header div i have a image. Each box(box1, box2, box3) inside the contain div has link inside like(software development(box1), Graphic Designing(box2), and Technical Training(box3). These links when clicked will take me to separate pages which has their own header images. So i have 3 header image for each box and a default header image in the home page.In the home page when ever I hover my mouse in the box1 div the header image should change to the box1 header image with an effect like fadeIn and return my default image on mouse out. Same for box2 and box3. Please help me with doing this with CSS or JS or jQuery. Thank You
<body>
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header"></div>
<div class="contain">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</div>
</div>
</body>
css:
.wrapper{
width: 100%
height: auto;
margin: 0px;
}
.out{
margin: auto;
width: 1000px;
height: 730px;
border-top: 5px solid #333333;
}
.in{
width: 900px;
height: 640px;
margin: auto;
margin-top: 25px;
}
#header{
background:url(../img/Untitled-1.jpg);
height: 175px;
width: 900px;
margin: 0px;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box1{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 0px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box2{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 302px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box3{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 602px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
I have a made an BIN
I am placing same image for all the 3 divs like
$('#content,#content2,#content3').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
You change with your respective images like
$('#content').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
$('#content2').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});....
jsBin demo
jQuery:
var currPage = 0; // PLAY HERE: set here current page (0 = home)
var $header = $('#header');
var $headerImg = $header.find('img');
$headerImg.eq( currPage ).show().addClass('currentImg');
// clone images to boxes:
var c = 0;
$('.box').each(function( i ){
$(this).prepend( $headerImg.eq(i==currPage? (i+1+c++) : c+i).clone() );
});
$('.box img[class^=headImg]').on('mouseenter mouseleave', function( e ){
var opacity = e.type=='mouseenter' ? 1 : 0 ;
var myClass = $(this).prop('class'); // get class
var $mainImg = $header.find('img.'+myClass);
$headerImg.hide();
$mainImg.stop().fadeTo(300, opacity);
$('.currentImg').stop().fadeTo(600, !opacity);
});
HTML:
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header">
<img class="headImg1" src="home.jpg" alt="" />
<img class="headImg2" src="ONE.jpg" alt="" />
<img class="headImg3" src="TWO.jpg" alt="" />
<img class="headImg4" src="THREE.jpg" alt="" />
</div>
<div class="contain">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</div>
</div>
MODIFIED CSS PART:
/*ADDED*/
#header img{
position:absolute;
display:none;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box{ /* CHANGED */
height: 360px;
width: 294px;
float: left;
margin: 67px 3px 0px;
position: relative;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
/* ADDED */
.box img{
width:100%;
}
See this : http://jsfiddle.net/xTjQT/2/
$('a').mouseover(function() {
var src = $(this).attr('alt');
alert(src);
$('#header img').stop().fadeOut(100, function() {
$(this).attr('src', src);
$(this).fadeIn(100);
});
});
$('a').mouseout(function() {
$('#header img').stop().fadeOut(200, function() {
$(this).attr('src', 'http://jsfiddle.net/img/logo.png');
$(this).fadeIn(100);
});
});