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.
Related
I have been trying to learn coding and not proficient at it. Beginner here.
I created a menu, with some div's that are draggable and collapsible and I would like them to expand as I drop into another box area (similar to widgets). I have written the code, but I am unable to make it work.
Is there a way of doing it?
HTML
<div id="box1" class="box1">
<div class = "widget" draggable="true" id="widget1">
<div class="collapsible" ondragstart="event.dataTransfer.setData('text/plain',null)">widget1<span class="close"> ×</div>
<div class="content">
Choose the content... <br/>
Place everything here <br/>
</div>
</div>
</div>
<div id="box2" class="box2" class= "notcollapsible">
</div>
JS
document.addEventListener("drop", function( event ) {
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged elem to the selected drop target
if ( event.target.className == "box2" ) {
event.target.style.background = "";
dragged.parentNode.removeChild( dragged );
event.target.appendChild( dragged );
var content = this.nextElementSibling;
//trying to expand next </div class= "content"> but I am unable to//
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
}
}, false);
Any help would be appreciated, Thank you...
Awesome you started to code, welcome to the community.
You could look use CSS flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A flex div can grow with the content placed within
I have made a simple system which detects double taps. I want to show a heart icon when someone double taps on an image, just like on Instagram.
This is what my code looks right now:
var elements = document.getElementsByClassName('snap_img');
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
// Some javascript to show the heart icon
});
});
This is what the HTML looks like:
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="#JohnDoe" />
<a class="snap_item_following_name" href="#">#JohnDoe</a>
<div class="snap_too">
</div>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="#ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
LA is the shit...
<a class="snap_text_hashtah" href="#">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
So when the element 'snap_img' is double tapped, I need to get the element 'like_heart' which is one line below the snap_img element. How do I get that sibling element and fade it in with JQuery?
Like this
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
$(element).next().text('♥').hide().fadeIn();
});
});
P.S. I've added that heart text, since the sibling was empty.
On the event handler, i would do $(element).parent().find('.like_heart').fadeIn(); So the code is not dependant on the element ordering.
(To clarify to selector: take the parent element which is the div.snap_item and find an element with class like-heart inside it)
I have integrated a nice second party accordion (Reference URL: http://www.switchroyale.com/vallenato/) into my website which can't display h1 ID as an anchor url by default.
The js code of the accordion is as following:
/*!
* Vallenato 1.0
* A Simple JQuery Accordion
*
* Designed by Switchroyale
*
* Use Vallenato for whatever you want, enjoy!
*/
jQuery(document).ready(function($)
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');
//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });
//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');
// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
});
and example of html code is as following:
<body>
<div id="accordion-container">
<h1 class="accordion-header" id="tab1">What is it?</h1>
<div class="accordion-content">
<p>Some texts goes here</p>
</div>
<h1 class="accordion-header" id="tab2">Download</h1>
<div class="accordion-content">
<p>Some other texts goes here</p>
</div>
</div>
</body>
Is there a way to bind the h1 ID (Here "tab1" and "tab2" are h1 IDs in the above html code) with click function of js code so that the heading id of the accordion append as an anchor url in the address bar of a web browser whenever the heading is clicked in order to open the associated tab like the following example?
http://www.somesite.com/somepage.html#tab1
http://www.somesite.com/somepage.html#tab2
Thanks,
The javascript code that handles the click event is the following. You have got to amend the codes accordingly. But before you do that, try doing the one suggested below.
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
If you want the url to be such, you make the header as a link (My idea):
<div id="accordion-container">
<a class="accordion-header" href="#tab1"><h1 id="tab1">What is it?</h1></a>
<div class="accordion-content">
<p>Some texts goes here</p>
</div>
<a class="accordion-header" href="#tab2"><h1 id="tab2">Download</h1></a>
<div class="accordion-content">
<p>Some other texts goes here</p>
</div>
</div>
What I did is to give the link the class name as "accordion-header". Please see if this works for you. If this works, perhaps you got to work on the css if any misalignment happens.
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.
Hello I have a site I am working on an for this site I am making three panels flip when they are clicked on, you can think of it as a flip card concept. I have everything working but I realized that since the div itself is wrapped in an anchor tag and has a display of "block". What I have is the content inside that are links to external pages but since the div is clickable it only reads that anchor. I tried using the z-index but that doesn't seem to help as all.
This is my markup:
What is ElectedFace?
<div class="flip_content" id="flip1">
<div class="content-info">
<h5 style="text-align:center; font-size:20px; margin:3px 0 0 0; font-family:Arial, Helvetica, sans-serif;"><span class="blue">Elected</span><span class="red">face</span></h5>
<p>electedface is America's free social network delivering more real time news, faster than any other website.</p>
<p>electedface connects subscribers to their elected officials with active electedface accounts</p>
<p>electedface empowers subscribers to share their voice and turn social networking into constructive civil action.</p>
</div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip2" data-flip_container="#flip_box2">
<div class="flipbox" id="flip_box2">
<h4>Getting Started</h4>
</div>
</a>
<div class="flip_content" id="flip2">
<div class="content-info">
<p> There are three ways to connect:</p>
<p>Read top news stories and Read local news stories</p>
<p>Connect to your elected officials and start a group in your community</p>
<p>Register for free membership</p>
</div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip3" data-flip_container="#flip_box3">
<div class="flipbox" id="flip_box3">
<h4>Next Steps</h4>
</div>
</a>
<div class="flip_content" id="flip3">
<div class="content-info">
<p>Elected officials: activate your electedface account, connect to your electorate, and enlist supporters.</p>
</div>
</div>
Heres my Javascript
<script type="text/javascript">
$(function(){
$('.flip_switch').bind("click",function(){
var element = $(this);
var content = element.data("content_container");
var flip_container = element.data("flip_container");
var active_flipbox = $('.activeFlip');
if(element.hasClass('activeFlip')){
//If the flipbox is already flipped
flip_container.revertFlip();
}
else{
if(active_flipbox){
//Revert active flipbox
active_flipbox.revertFlip();
//Remove active status
active_flipbox.removeClass('activeFlip');
}
$(flip_container).flip({
direction: 'rl',
color: '#c8cbce',
content: $(content).html(),
speed:100,
onBefore: function(){
$(flip_container).addClass('activeFlip');
}
});
}
return false;
});
});
</script>
It seems to me your problem is so called bubbling
What you need is (most likely :) :
http://api.jquery.com/event.stopPropagation/