I am looking for ways on how this HTML element is being hidden.
The HTML DOM on load looks like this for an example,
<div class="">
<header>
<!---->
<!---->
<!---->
</header>
</div>
After initiating a click event, the HTML DOM changes to this;
<div class="container">
<header>
<!---->
<div class="show"></div>
<!---->
</header>
</div>
Any suggestions on how its doing this? Also, is there a way to capture this live element? I have a click event elsewhere in the DOM that triggers the show element, I have also tried the on function but it shows as undefined. Bear in mind, this is not my own site.
I hope this makes sense, thanks let me know If I need to edit or suggest any changes
it's something similar to this, where class="show" or hide are css classes that set the element to display:none or block
this example is meant for demonstration only
div=document.querySelectorAll("div")
btn.addEventListener("click",()=>{
i=Math.floor(Math.random()*div.length)
console.log(div[i])
div[i].setAttribute("class","show")
})
.hide{display:none};
.show{display:block};
<div class="container">
<header id="h">
<div class="hide">a</div>
<div class="hide">v</div>
<div class="hide">x</div>
</header>
</div>
<button id="btn">show</button>
Related
I'm trying to find a way to make a replace button on my page. I've looked around the web but all I found was a replace text script. What I want is to replace both the text in my h1 tag and the text in the article. If its possible to just replace the whole div with another div it would be great.
To explain a bit more accurate on my page: www.bravitus.com
I want at the "OM MIG" section, a button where I could switch out the content, for something else like some info about bravitus. I'd like a button to click that replaces only the orange section.
Here's a bit of my mark-up:
<div class="full-page" id="page-2">
<div class="container">
<h1 style="color:white;" >Hvem er jeg</h1>
<div class="columns eight"><article> Lorem ipsum </article>
</div>
I want to replace all content in the page-2, or just switch out the whole page-2 div with another.
Is that possible?
Here we go, a small demo on jsFiddle (http://jsfiddle.net/json/8cu34y4L/).
There are three buttons with the data-switch attribute. The attribute indicates what block inside the page-2 will be shown, when the button is clicked.
HTML
<button data-switch="#about_me">Click to read about me</button>
<button data-switch="#education">Click to show my education</button>
<button data-switch="#about_name_bravitus">Click to read about the name Bravitus</button>
<div id="page-2">
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e) {
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
I'm not sure if I understood what you want.
But if you just want to replace all html inside page-2, you simply can do that (with jQuery):
var html = // Here comes your html
$('#page-2').html(html);
So im not sure if this is the correct way but what i ended up doing was this
function myFunction(){
document.getElementById("fisk").innerHTML = "Hvem er du"
}
<button onclick="myFunction()">Click me</button>
Now i just have to find a way to make it replace more than text. to replace divs and other tags all together.
Just add this link and execute the below code:
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
Click to read about me
Click to show my education
Click to read about the name Bravitus
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e)
{
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
I have this HTML structure:
<div id="snaps">
<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>
<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">
Image caption
<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>
</div>
The div '#snaps' is a static div, which holds all the '.snap_item' elements which are added with the JQuery .html() function. So the '.snap_item' elements are dynamically added to the div '#snaps', like so:
<div id="snaps"><!-- static div that holds the dynamic elements -->
<div class="snap_item"><!-- dynamically added element -->
<img class="snap_img" src="..." alt="..." /><!-- when this element is double tapped, the event should be fired -->
</div>
</div>
When the user double taps on '.snap_img', some stuff has to happen. The element '.snap_img' is inside the '.snap_item' element.
What I have so far is:
$('#snaps').find('.snap_item').hammer().on({
doubletap : function(event){
alert("doubletap!");
}
});
This doesn't work at all. The on() function should allow me to fire events on dynamically added HTML, but this code doesn't work. I have this code from this SO question
I have included hammer.js, jquery_hammer_plugin.js and query.specialevent.hammer.js. So all the necessary JS files have been included, but still no luck.
How do I make this work?
Okay, so I've solved the issue by using this code:
$('#snaps').hammer({domEvents:true}).on("doubletap", ".snap_img", function() {
alert("doubletap!");
});
So, whoever is having an issue with firing Hammer touch events on dynamically added HTML, this is the solution!!!
Thanks to everyone who (tried) to help! :)
I have question that I feel should be simple but I am having issues getting the result I need. I can not change the HTML. Any help would be great!
I have a set up like this.
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
I am trying to get the text from each of those divs, set it to a var that I can then use to add a data attribute to the above it.
var DivText = $('mydiv').text();
$('.myAtag').attr('data', 'DivTest');
The problem I run into this that the data attribute is then filled with the text from both divs.
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
What can I use/how can I modifiy my jquery to achieve this outcome?
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
Use a callback to set each data attribute differently
$('.myAtag').attr('data-text', function() {
return $(this).next('.mydiv').text();
});
FIDDLE
It's usually a good idea to use a key, as in data-whatever
You could also use data(), but that sets the data internally in jQuery and does not add an attribute
I'm working on a responsive tumblr-theme based on the 1140GRID. To make the static videos fit the column, I used the jquery fitvids plugin.
My setup code looks like this:
$(document).ready(function(){
$("#post_{PostID}").fitVids();
});
and the accompanying html like this:
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
How do I trigger fitVids for multiple, dynamically generated ids on a page?
Thank you!
You may want to put that closing DIV inside the video block.
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
Then, you could target all the subdivs of ninecol.
<script>
$(document).ready(function(){
$('.ninecol > div').fitVids();
});
</script>
Can someone please explain the structure of this line of a script for me? Another user on here has written it as part of a function that I know want to edit and change to use elsewhere on my site.
$('#main_content .img-wrapper').empty().append($(this).find('img').clone());
This one takes an image from one div and copies it to another with the class="img-wrapper"
I want to do exactly the same but with text. I tried this
$('#main_content .text-wrapper').empty().append($(this).find('.info').clone());
where ('.info') is the class name of the div I want to copy. Its not working.
I don't fully understand the syntax as this is my first day using javascript. Please can someone explain where I'm going wrong?
This is the HTML - There are four different images and when the user clicks on each of the image I want it to load the same image and associated text in the main content div
<div class="row">
<div class="card-container">
<div class="card">
<div class="back">
<img src="images1.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#cc99cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images2.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#9966cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images3.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#6666cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images4.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#3366cc;"></div>
</div>
</div>
This is the main content div
<div id="main_content">
<!-- main content -->
<div class="img-wrapper">
</div>
<div class="text-wrapper">
</div>
</div>
The javascript in question is using jQuery.
$('#main_content .img-wrapper')
returns the element(s) with class 'img-wrapper' inside the element with id 'main_content'
.empty()
empties this element (removes all it's HTML contents)
.append(
inserts the argument (the bit that comes next) into this element
$(this).find('img')
finds all 'img' tags within the element referred to by this (i.e. if this was triggered from a .click() handler then the element that was clicked)
.clone()
clones these elements so that there are two versions - one in their original location and one being inserted into the #main_content img-wrapper element.
);
Do you definitely have a #main_content .text-wrapper element?
Without seeing the html structure, my guess would be the context in which you're trying to find .info is incorrect.
I'm assuming this block of code is within an event handler like a click or mouseover or something. In that case the $(this) is referring to the element that triggered that event. So the following snippet:
$(this).find('.info')
is looking for elements with a classname of info within the element referred to by $(this).
Make sure the context is correct - change $(this) to the element that you need to search within.
Try this:
$('#main_content .text-wrapper').empty().append($(this).find('.info').html());