I am trying to swap image and the videos when user clicks a selected element
I have something like the following:
<div class='container'>
<h1 class='title'>Title</h1>
<div class='row'>
<div class='main'>
<img class='col-md-7 col-sm-8 img-responsive' src='main.png'/>
</div>
</div>
<div class='row'>
<a href='#' class='component'><video class='video col-md-4 col-sm-4' controls><source src='video1.mp4'/></video></a>
<a href='#' class='component'><video class='video col-md-4 col-sm-4' controls><source src='video2.mp4'/></video></a>
<a href='#' class='component'><img class='col-md-4 col-sm-4 img-responsive' src='img1.png'/></a>
</div>
</div>
I want to swap the image or video to the main div whenever the user click the link. My js
$('.component').on('click', function(){
var mainSrc = $(this).closest('.container').find('.main').html();
var newSrc = $(this).html();
$(this).html(mainSrc)
$(this).closest('.container').find('.main').html(newSrc);
})
My problem is that I am using bootstrap and if I copy the entire html under my main div, it carries the col-md-4 col-sm-4 to the main div. It will shrink the main div width. How do I keep the same class under main div and component a tag?
Take those classes out of the elements and create another wrapper div. You can assign it to .main as well, but I'm not too sure what you're doing with .main, so I'll just leave that alone.
<div class='container'>
<h1 class='title'>Title</h1>
<div class='row'>
<div class='main'>
<div class='col-md-7 col-sm-8 img-responsive'>
<img class='img-responsive' src='main.png'/>
</div>
</div>
</div>
<div class='row'>
<a href='#' class='component'>
<div class='col-md-4 col-sm-4'>
<video class='video' controls><source src='video1.mp4'/></video>
</div>
</a>
<a href='#' class='component'>
<div class='col-md-4 col-sm-4'>
<video class='video' controls><source src='video2.mp4'/></video>
</div>
</a>
<a href='#' class='component'>
<div class='col-md-4 col-sm-4'>
<img class='img-responsive' src='img1.png'/>
</div>
</a>
</div>
</div>
and then you can do something like this to select and swap the media.
$('.component').on('click', function(){
var mainSrc = $(this).closest('.container').find('.main:first-child').html();
var newSrc = $(this).children().first().html();
$(this).html(mainSrc)
$(this).closest('.container').find('.main:first-child').html(newSrc);
})
Given your HTML, here is a jsfiddle of a solution.
$('.component').click(function () {
var clickClass = $(this).children(0).attr("class");
var mainClass = $(".main").children(0).attr("class");
var clickHTML = $(this).html();
var mainHTML = $(".main").html();
$(this).html(mainHTML);
$(".main").html(clickHTML);
$(this).children(0).attr("class",clickClass);
$(".main").children(0).attr("class",mainClass);
});
I have added Bootstrap but don't have the image files.
Related
I have a single page site which shows/hides section on click within the viewport.
This is an example of one of the sections:
<section id="question1">
<div class="container-fluid">
<div class="row">
<div class="question-container">
<div class="question-box">
<p>What is the answer to this question?</p>
</div>
</div>
<a href="#">
<div id="cheetah" class="col-xs-12 col-lg-6">
<img src="images/cheetah.jpg" class="img-responsive" />
</div>
</a>
<a href="#">
<div id="hedgehog" class="col-xs-12 col-lg-6">
<img src="images/hedgehog.jpg" class="img-responsive" />
</div>
</a>
</div>
</div>
</section>
The problem I am having is that I don't want section ID's to be the same as the a tag href within it. If that makes sense? This is the jQuery I have already:
$(document).ready(function(){
//ID array
var questionArray = ['#question1', '#question2', '#question3', '#question4', '#question5', '#question6', '#question7', '#question8', '#question9', '#question10'];
//collect sections and place in array
var sectionArray = [];
$('section').each(function(){
sectionArray.push(this);
})
//randomise id array
questionArray.sort(function() {
return 0.5 - Math.random()
});
//Target a elements - attach ID to next question
for(var i = 0; i < sectionArray.length; i++) {
var aEl = $(sectionArray[i]).find('a');
$(aEl).each(function(){
$(this).attr('href', questionArray[i]);
})
}
}
Any help?
EDIT:
Link to codepen: https://codepen.io/samrbrown/full/aLdgYK/
I have this little js which adds divs and its content on a click as plain text in the textarea:
var content = " ";
jQuery('body').on('click', '.btn_video', function() {
if(jQuery(this).text()=="ADD") {
jQuery(this).text("REMOVE");
jQuery(this).parents(".thumbnail").parent().addClass('selected');
} else{
jQuery(this).text("ADD");
jQuery(this).parents(".thumbnail").parent().removeClass('selected');
}
jQuery('.selected').each(function(){
content += jQuery(this).prop('outerHTML');
});
jQuery('#usp-custom-5').val(content);
});
This is the html that is added on a click
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+e.id+'?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption">
<p>Duration: <span class="video-time">'+YTDurationToSeconds(e.contentDetails.duration)+'</span></p>
<button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+e.id+'?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption">
<p>Duration: <span class="video-time">'+YTDurationToSeconds(e.contentDetails.duration)+'</span></p>
<button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
</div>
</div>
</div>
<textarea id="usp-custom-5"></textarea>
I want to be able to add each html content when I click on the button without having repeated content and also be able to remove the single content when a user clicks on the button.
In the following jsfiddle if I click on the Add button i get repeated content
add var content = ''; at the beginning of your click function.
https://jsfiddle.net/q5070aa4/5/
what was happening before is that you were taking whatever content existed and adding whatever element text that was "selected" - and this would produce your duplicate data. you want to clear out the textarea on click so that only the "selected" elements text shows
try this: you can add remove selected class to div and read all div with selected class to get content and replace it in text area
jQuery(function(){
jQuery(".btn.btn-danger.btn-block").on("click", function(){
var text = $(this).text();
if(text=="ADD") {
jQuery(this).find("strong").text("REMOVE");
jQuery(this).closest(".col-xs-12.col-md-4").addClass("selected");
} else if(text == "REMOVE") {
jQuery(this).find("strong").text("ADD");
jQuery(this).closest(".col-xs-12.col-md-4").removeClass("selected");
}
var content = "";
jQuery(".col-xs-12.col-md-4.selected").each(function(){
content += '<div class="col-xs-12 col-md-4">' + $(this).html() + '</div>';
});
jQuery('#usp-custom-5').val(content);
});
});
JSFiddle Demo
jQuery:
$(document).ready(function(){
$('.menuElements').hover(
function(){
$(this).addClass('animated bounce');
},
function(){
$(this).removeClass('animated bounce');
});
//trying to create delay here
$('.menuElements').click(
function(){
$(this).addClass('slideOutUp').delay(1000);
}
)
});
html:
<div id='wrapper'>
<div class='container-fluid col-xs-10 col-xs-offset-1 menuContainer'>
<div class='row-fluid' style='height:100%'>
<a href='#'>
<div id='home' class='container col-xs-3 menuElements' style='background-color: #C22326'>
<img class='myIcons center-block vertical-align' src='images/home.png'>
</div>
</a>
<a href='#'>
<div id='projects' class='container col-xs-3 menuElements' style='background-color: #F37338'>
<img class='myIcons center-block vertical-align' src='images/projects.png'>
</div>
</a>
<a href='#'>
<div id='aboutMe' class='container col-xs-3 menuElements' style='background-color: #FDB632'>
<img class='myIcons center-block vertical-align' src='images/aboutMe.png'>
</div>
</a>
<a href='#'>
<div id='contactMe' class='container col-xs-3 menuElements' style='background-color: #027878'>
<img class='myIcons center-block vertical-align' src='images/contactMe.png'>
</div>
</a>
</div>
</div>
</div>
What my page looks like are four columns and when I click on a column it slides up and loads the next page (which I still need to configure the href). What I'm trying to do is have the column slide up on click and finish the animation before loading the new page.
I'm fairly new to jQuery and trying to teach myself so if you know any good resources, besides http://api.jquery.com/, I can use that would be great!
Thanks guys.
You can set a delay.
Either set a delay in the animation itself:
$(".menuElements").addClass("slideOutUp").delay(HOW_LONG);
Or you could set a timeout before continuing to the next action with JS:
setTimeout(function(){ $(".menuElements").addClass("slideOutUp") }, HOW_LONG);
$(".menuElements").addClass("slideOutUp").delay(1000);
You can use timeout to delay the animation. For Example
window.setTimeout(function(){
$(".menuElements").addClass('slideOutUp');
}, 1000);
I have an banner with mouse over effects here:
As you can see the mouseover effects are working perfectly however I don't know how to make a mouse out animation. Here are its current codes:
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
HTML:
DIV id=base>
<DIV id=mapcontainer>
<A href="javascript:warp()">
<IMG border=0 name=targetimage src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif">
</A>
</DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1>
<A onmouseover=changeimage(2,this.href) href="index.html">8CCC REQUESTS/TALKBACK</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(1,this.href) href="index.html">Alice Springs 8952 7771</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(0,this.href) href="index.html">Tenant Creek 8952 7182</A>
</DIV>
<DIV class=textboxinner3>
<SPAN class=t3nonelink>...other contact details <A onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV>
</DIV>
</DIV>
<div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Hope you could help me achieve the mouseout effect.
I recommend using either 'onmouseout="changeimage(2,this.href)"' (in the same place as the mouseover property. Or use a jQuery handler, which is more complex for your needs really.
I want to add as a class the image alt attribute to its container element. Markup:
<div class="field-group-our-people">
<div class="field-items even>
<img alt="John">
</div>
<div class="field-items odd>
<img alt="Kevin">
</div>
<div class="field-items even>
<img alt="Kate">
</div>
<div class="field-items odd>
<img alt="Martin">
</div>
</div>
To be like this:
<div class="field-group-our-people">
<div class="field-items even john>
<img alt="John">
</div>
<div class="field-items odd kevin>
<img alt="Kevin">
</div>
<div class="field-items even kate>
<img alt="Kate">
</div>
<div class="field-items odd martin>
<img alt="Martin">
</div>
</div>
My Jquery code(but not working):
//Add the image alt attribute as class for individual styling
$('.group_our_people .field-item').each(function() {
var att = $('.group_our_people .field-item img').attr('alt');
$(this).addClass(att);
});
What is wrong/missing in my code?
You should get the img that is child of the current div (on iteration):
var att = $(this).find('img').attr('alt');
The way you're doing (i.e. repeating the selector), you end up retrieving multiple values, and only the first one is taken into account. So, every div will get its class: "John".
$('.field-group-our-people .field-items img').each(function() {
$(this).parent().addClass( $(this).attr('alt') );
});
$('div.field-group_our_people div[class^=".field-items"] img').each(function()
{
var att = $(this).attr('alt');
$(this).parent().addClass(att);
});