If i have for example divs with the class="text1", that have an a-tag with the class"text" over them.
<a class="text">ClickHere1</a>
<div class="text1" style="display: none">
<p>Hey</p>
<p>Ho</p>
</div>
<a class="text">ClickHere2</a>
<div class="text1" style="display: none">
<p>Hey</p>
<p>Ho</p>
</div>
<div id="Content">
</div>
How can i move the content of the class="text1" into the div with the id="Content" when the user clicks on an a-tag that is directly over the div wit class"text1". Or better said that when an user clicks on an a-tag only the content of the next div with the class="text1" is appended to the div with the id:Content.
Also im asking me how i can insure that in the div with the id:Content always only content of one div is displayed!
Thanks and i hope you understand me !
Do you want to move, or copy?
To copy the text:
$(".text").click(function() {
$("#Content").html($(this).next(".text1").html());
});
If you want to move the text, use
$(".text").click(function() {
$("#Content").html($(this).next(".text1").html());
$(this).html('');
});
Try this one:
$("a.text").on("click",function(){
$("#Content").html( $(this).next(".text1").html() );
})
Fiddle: http://jsfiddle.net/4w3Hy/1/
Haven't tested it, but you're looking for something like this. This should give you an idea
$(function(){
$(".text").click(function(){
var contentClone = $(this).next().html().clone();
contentClone.insert($("#Content"))
});
})
Moving the content
$("a.text").click(function(){
$("#Content").html($("this")next().html());
})
You may try this
$('.text').on('click', function(){
$('#Content').html($(this).next('div.text1').html());
});
DEMO.
Related
I'm creating a page for a company where they have pictures of the 4 founders all side by side. The text under all 4 images needs to change based on what photo is clicked or hovered on. So one says "mark" in bold and under that it will have his qualifications. But that will all be replaced when I click "kim" who is the next picture.
I'm very new to HTML, CSS, and have never tried javascript so this is my first attempt.
I want the text to be styled the way I want, but I can't find a way to update it all. I only figured out that I can print raw text.
Is there a way to call a div to put the text there and replace it with a new div for each image click?
Like instead of writing .html("Mark does xyz") you could instead paste in the entire div "tr1" with the changed button and heading and paragraph?
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>
<script>
$('#Mark').click(function() {
});
$('#Kim').click(function() {
});
</script>
You can use show/hide method for your requirement.
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
#tr2{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>
$('#Mark').click(function() {
var elementToClone = document.getElementById('tr1');
var clone = elementToClone.cloneNode(true);
var container = document.getElementById('container');
// Then you need to append that cloned element into a container on the page.
container.appendChild(clone);
});
The container will be en element in your HTML that currently is not there. This is just a place where you want this cloned HTML to go:
<div id="container></div>
This will get you to a point where you've copied the HTML you need and placed it where you want it on the page. When you click a different image, you'll need to remove this HTML, clone the other HTML and append it to container. You'll also probably need an if statement in there to check if container contains something already.
You're using jQuery in your question, so this answer uses the jQuery click function -- if you don't have jQuery included, you'll need it.
You can also use these vanilla js click methods:
<img id="Mark" onclick="doHTMLAppendFunction()" src="foo.jpg" />
or
document.getElementById('Mark').addEventListener('click', doHTMLAppendFunction);
You're trying to use JQuery to achieve this and following does the job. There used the common class "trainer-text" to hide all overlay texts to hide at the initial point. Use some css to make the text on your images. Refer the following to achieve that. https://www.w3schools.com/howto/howto_css_image_overlay.asp
/*
Use the following if you need display text for hover event
*/
$("#Mark").mouseover(function(){
$("#tr1").css("display", "block");
});
$("#Mark").mouseout(function(){
$("#tr1").css("display", "none");
});
$("#Kim").mouseover(function(){
$("#tr2").css("display", "block");
});
$("#Kim").mouseout(function(){
$("#tr2").css("display", "none");
});
/*
Use the following if you need display text for click event
*/
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
.trainer-text {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</b></h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%"/>
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%"/>
<div id="tr1" class="trainer-text">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2" class="trainer-text">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>
Simple thing probably, but it seems especially for my version I did not find any solution.
This simple div shows a big picture, heading and long text. I want that if you click onto the picture, it will collapes/remove all of that on the site so it will have more space. BUT - the Heading should still stay (probably in a smaller format).
I tried to make it collapseable with javascript, but I can't really get it to work that the heading stays there even though the rest get's removed. Because the heading needs to stay, so with another click onto the heading you can bring it back if needed.
I'd like to do that with CSS/Javascript and without Angular.JS or similiar, any of you got a solution?
<div id="header">
<img src="img/logo.png"></img><br>
<h3>HEADING</h3><br>
<blockquote class="form-text text-muted">Long Text in here</blockquote>
</div>
You have to put click event to elements you want to click and a function to execute after clicking. I've added id property to image header to be able to fetch it with javascript.
<div id="header">
<img id="imageInHeader" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" onclick="hideMe()"></img><br>
<h3 onclick="showMe()">HEADING</h3><br>
<blockquote class="form-text text-muted">Long Text in here</blockquote>
</div>
<script>
function hideMe() {
document.getElementById('imageInHeader').style.display = 'none'; // removes the element from the layout
// document.getElementById('imageInHeader').style.visibility = 'hidden' // hides the element, doesn't affect layout
}
function showMe() {
document.getElementById('imageInHeader').style.display = 'block';
// document.getElementById('imageInHeader').style.visibility = 'visible'
}
</script>
check this out
in case your are not able to make changes in your html
$('#image').click(function() {
$("#header #image").css("display", "none");
$("#header .text-muted").css("display", "none");
});
$('#header h3').click(function() {
if($("#header #image").css("display") == "none"){
$("#header #image").css("display", "block")
}
if($("#header .text-muted").css("display") == "none"){
$("#header .text-muted").css("display", "block")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="header">
<img id="image" src="https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"></img><br>
<h3>HEADING</h3><br>
<blockquote class="form-text text-muted">Long Text in here</blockquote>
</div>
hope this solve your problem
thanks
<div id="header" id="collapseThisDiv">
<img src="img/logo.png"></img><br>
<h3>HEADING</h3>
<blockquote class="form-text text-muted">Long Text in here</blockquote>
</div>
<div id="header" id="expandThisDiv">
<img src="img/logo.png"></img><br>
<h3>HEADING</h3>
</div>
On 'image' click, Hide the above div and show the lower div and vice versa... This way it won't appear that heading is collapsed at any time.
I have a problem with my code in Jquery. I need to put one element before text in div. But it stays on same place. Can you help me ? Thank you very much.
Jquery:
$('.content_wrap img').each(function(){
if($(this).nextAll('.darkblue').length !== 0){
$('.darkblue').next('<div>').prepend($(this));
}
});
HTML:
<h2>
<img class="catIcon" alt="Software Maintenance Agreements" src="http://www.example.com/storage/images/article/21-80-3.jpg" style="padding-right: 10px;"> <!-- this is image i want to move before text -->
<a class="darkblue underline ui-link" href="http://www.example.com/gb/en/2099_software-maintenance-agreements-sma.html?do=article">Software Maintenance Agreements (SMA)</a>
</h2>
<div>
Software Maintenance A...roups at a fixed rate. <!-- element should appear before text -->
<a class="small ui-link" href="http://www.example.com/gb/en/2099_software-maintenance-agreements-sma.html?do=article">[more..]</a>
</div>
Try
$('.content_wrap img').each(function () {
$(this).prependTo($(this).parent().next())
});
Demo: Fiddle
If you want to check whether the next element has the class darkblue then
$('.content_wrap img').each(function () {
var $this = $(this);
if ($this.next().hasClass('darkblue')) {
$this.prependTo($this.parent().next())
}
});
Demo: Fiddle
why not just try
$("div").prepend($this)
if that's the only div in your file.
You need to find the parent of nextblue (the h2) then find the next div:
$('.content_wrap img').each(function(){
if($(this).nextAll('.darkblue').length !== 0){
$('.darkblue').closest("h2").next('div').prepend($(this));
}
});
You need to find it's parent's next div not it's next div:
$('.content_wrap img').each(function(){
if($(this).nextAll('.darkblue').length !== 0){
$('.darkblue').parent().next().prepend($(this));
}
});
working Solution: http://jsfiddle.net/avi_sagi/P6LhK/
The <h2> must be inside <a> tag. I checked with the Updated code its fine
<div class="content_wrap">
<img class="catIcon" alt="Software Maintenance Agreements" src="http://www.example.com/storage/images/article/21-80-3.jpg" style="padding-right: 10px;">
<a class="darkblue underline ui-link" href="http://www.example.com/gb/en/2099_software-maintenance-agreements-sma.html?do=article">
<h2>Software Maintenance Agreements (SMA)</h2>
</a>
<div>Software Maintenance A...roups at a fixed rate.
<a class="small ui-link" href="http://www.example.com/gb/en/2099_software-maintenance-agreements-sma.html?do=article">[more..]</a>
</div>
try this
$('.darkblue').parent("h2").next("div").prepend($(this));
I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.
When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.
This is the jsfiddle I'm working with.
The webpage I'm working with is here.
Place where am i making the mistake.
The jQuery I'm working with so far looks like this
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})
$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})
$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})
});//end of ready
The HTML I'm working with looks like this :
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
</div>
<div class="clear" class="question"></div>
<div id="answer1">
1
</div>
<div id="answer2">
2
</div>
<div id="answer3">
3
</div>
<div id="answer4">
4
</div>
<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked
</div>
load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
FIDDLE
Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work.
http://jsfiddle.net/PZnSb/6/
Basically you want to set the inner html of one element to the inner html of another, like this:
$('.question1').click(function(){
$('.new_member_box_display').html($('#answer1').html());
})
instead of this:
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
It seems you just want the text to change when you click, try this.
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').text($('.answer1 ').text());
});
$('.question2').click(function(){
$('.new_member_box_display').text($('.answer2').text());
});
$('.question3').click(function(){
$('.new_member_box_display').text($('.answer3').text());
});
$('.question4').click(function(){
$('.new_member_box_display').text($('.answer4').text());
});
});
http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/
lets say i have this lump of HTML:
<div class="container">
<span class="title">Heading 1</span>
This is a description..<br />
This is the second line..
<div class="image"><img src="image.jpg" /></div>
</div>
What i want to do using jQuery/JavaScript is hide/remove all text and elements between <span class="title"> and <div class="image">.
I've looked all over and found pretty much nothing. Any ideas on how i could do this?
How about something like this? http://jsfiddle.net/ZW8q2/1
var foo = $('.container').children(':not(br)');
$('.container').html('').html(foo);
You could try:
var str = $('.container .title').text() + $('.container .image').html();
$('.container').html(str);
JS Fiddle.
Try this:
Place a tag around what you want to hide, give div an ID name. So in the end your will look like:
<div id = "hideMe" style ="display:block">...Your Content...</div>
Use this javascript:
function hide()
{
document.getElementById('hideMe').style.display = "none";
return;
}
Have the Javascript function called whenever you want to hide the stuff between the div from a button (or other control) like this:
<input type= "submit" onclick ="hide()">