Unsure if anybody is familiar with TypeForm. I am currently testing their forms but its very limited to options with regards to optional items such as incremental question numbers, bullet points & * for required questions.. Ive attached a screenshot of the exact item shown in the dev window that I wish to remove, how is this possible on page load using Javascript or jQuery? i.e. document.getElementsByClassName("Item");
EDIT
The way typeform is embedded is as shown in the snippet below:
Much appreciated !!
<div class="typeform-widget" data-url="https://12837r8yhe.typeform.com/to/sKcd9C" style="width: 100%; height: 500px;" > </div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>
On page load you can do this to remove all instances of the class
$(document).ready(function(){
$('.Item').remove('Item');
});
Or just the class on divs
$(document).ready(function(){
$('div .Item').remove('Item');
});
You can remove or hide it using jquery when the page loads. But it will remove all the div items which have class .item
$(document).ready(function(){
$("div.item").remove();
console.log("removed");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Div item was here but removed when page loaded.</p>
<div class="item">1 ></div><span>Just before me</span>
$("div.item").remove() should do the trick as long as there arent other divs with the item class..
$('div.item').remove();
or
$('div.item').first().remove();
Related
Im building shop on woocommerce and im trying to make spoiler under product with short description on archive page.
But unfortunetely it works only with first product.
I made changes inside content-product.php
<div class="tog-holder" id="tog">
<div class="bar horizontal"></div>
<div class="bar vertical"></div>
</div>
<div id="anim">
<p><?php echo apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ) ?></p>
</div>
Here is a css:
<style type="text/css">
/* plus sign */
#anim{display:none}
.bar{transition:all .2s ease-in-out}
#tog.animate .bar{-webkit-transform: rotate(45deg)}
.tog-holder{position:relative;width:32px;height:32px;padding:15px 0}
.bar{position:absolute;background-color:#000;}
.horizontal {width:32px;height:2px;left:0;top:15px;}
.vertical {width:2px;height:32px;left:15px;top:0}
</style>
And Jquery
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#tog").click(function() {
jQuery("#tog").toggleClass("animate");
jQuery("#anim").slideToggle(800);
});
});
</script>
I think problem is with Jquery. I dont know it very well. I put script and css to to header with Insert Headers and Footers plugin it works like below on the screenshot.
Thanks in advance!
IDs are unique identifiers and should only be existing once on a page.
Your jQuery script is getting the id "tog" and uses the click function. You are only do this for the first element with this id.
You should use a class instead and could use a for each to add this click function to all elements with this class.
Another method would be to add the on click to the html tag
<div onclick="yourFunction()"></div>
and create a function where you are referencing to "this" to always use THIS element which is clicked.
EDIT: Here is an example code for you, to make things clearer
<script>
jQuery(document).ready(function(){
jQuery(".class_of_your_hidden_description").hide();
jQuery(".class_of_your_element_to_be_clicked").click(function(){
jQuery(this).next(".class_of_your_hidden_description").slideToggle();
});
});
</script>
I am trying to hide menu items where they contain the word 'Benefits HIDDEN' in a quick launch list. I have been trying to get a script to work, but no avail so far. Using F12 in Edge, the class I want to hide is as follows;
<span class="menu-item-text">Benefits HIDDEN</span>
Which sites under this DIV
<div class=" noindex ms-core-listMenu-verticalBox" id="zz13_idPDPQuickLaunch">
I was trying this kind of approach;
<script>
$(document).ready(function() {
$(".zz13_idPDPQuickLaunch *:contains('Benefits HIDDEN')").hide ();
});
</script>
But no luck!
zz13_idPDPQuickLaunch is ID not a class, use #
eg:
<script>
$(document).ready(function() {
$("#zz13_idPDPQuickLaunch *:contains('Benefits HIDDEN')").hide ();
});
</script>
You can use the class/id of element you want to hide as the main part of jQuery selector.
If you want to hide the li tag, you can use(static is the class of the li tag):
$(".static:contains('Benefits HIDDEN')").hide();
Best regards,
Amos
I have my posts lopping on an .each loop and I have a link to display comments on the bottom of the loop.
I want to show the comment section on click, but when I click comments for all posts open as well. I only want the one that's clicked to open.
I've tried a ton of different examples I've found on this site, but so far none of them have worked.
I'm sure this is extremely easy to accomplish, but I'm a JavaScript noob.
Here is the JSFiddle link - http://jsfiddle.net/omgwhyamisobad/h0yhvqa3/
As well as the code snippet -
JS
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$('.artist-micropost-comments-container').toggle();
});
});
HTML
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
CSS
.artist-micropost-comments-container {
display: none;
}
The way that you are trying to grab the relevant element is wrong. You need to traverse the DOM with respect to the element that is being clicked. If you try to use the direct class selector in this case, then it would select all the elements which are having the supplied class.
Try,
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$(this).closest('.artist-micropost-social')
.next('.artist-micropost-comments-container').toggle();
});
});
DEMO
Use
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$(this)
.closest('.artist-micropost-social') //Find parent container
.next('.artist-micropost-comments-container') //Find next comments container
.toggle();
});
});
Try This SEE DEMO
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$( this ).parent().next().slideDown().siblings('.artist-micropost-comments-container').slideUp();
});
});
I want to hide my homepage content after other link is clicked. My homepage content is into
<div class="active">
Homepage content
</div>
css class active and inactive
.active {
margin-top:230px;
font-size: 30px;
color:black;
}
.inactive
{
opacity:0;
}
I tried this script but it is not working.
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$(this).removeClass("active").addClass("inactive");
});
</script>
I upload it to an web hosting so you can see full html code here and full css file here
$(this).removeClass("active").addClass("inactive");
Is adding and removing the class from your link (which I assume has id="#link-link1)
Instead you need to give your div an id like
<div id="homepage" class="active">
Then in your JS code reference that by id:
$('#homepage').removeClass("active").addClass("inactive");
Even better would be to use jquery's hide() method or toggle() if you wanted it to come back the next time you clicked:
$('#homepage').toggle();
Add an ID to the "Homepage content" div, so we can find it using javascript.
<div class="active" id="contentArea">
Homepage content
</div>
Try placing you jQuery code inside a document read. Optionally place it right before the closing </body> tag. Add the css classes to the "Home content" div and not to the link element addressed by $(this):
$( document ).ready(function() {
var contentArea = $("#contentArea");
$("#link-link1").click(function(){
contentArea.removeClass("active").addClass("inactive");
});
});
Consider using the jQuery function toggle() for changing contents visibility.
Take a look at the manual: http://learn.jquery.com/
Just take a look at that fiddle I make a simple example for you.
In you'r web page you must use better div elments as tabs not a elements
Code:
$("#random_link").click(function(){
//$(".active").css("display","none"); //WORKS TOOO
$(".active").fadeOut();
})
Working Fiddle
HTML
<a id="link1" href="#">Hide Home Page</a>
<a id="link2" href="#">Show Home Page</a>
<br/>
<div id="home_page">
<hr/>Homepage content
<hr/>
</div>
jQuery
$('#link1').click(function () {
$('#home_page').hide();
});
$('#link2').click(function () {
$('#home_page').show();
});
Hope this helps..!!
Update using toggle() based on #Cfreak answer
Updated Fiddle
Since you are using Jquery you can use hide method that will apply to your css of that element display: none;
$('#homepage').hide();
$('#homepage').show(); //to make it visible again
hope it help
You have to change the class for the div, in your code you are change the class of the link, add an Id or class to the div, for example:
<div class="active" id="test">
Homepage content
</div>
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$('#test').removeClass("active").addClass("inactive");
});
</script>
I have a fairly novice understanding of CSS and HTML, and I'm trying to do something that I think should be relatively simple (in a custom tumblr theme I'm creating), but I can't find a straightforward answer. I have a feeling there might be a super easy way to do what I want in JavaScript.
I'd like to display a DIV only on the main index page (i.e. homepage) of the tumblr blog. It seems the documentation tumblr provides allows you to do this to some extent (through the {Block:IndexPage} variable), but the problem is the code within this element displays on all index pages (i.e. instead of just showing up at the root level on /page/1, it will show up on subsequent "index" pages like /page/2, etc.
Here's the code I have, which successfully does not show the div on permalink pages:
{block:IndexPage}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:IndexPage}
Any ideas? Any help is much appreciated!
This will work:
{block:IndexPage}
<div id="index"
{block:SearchPage}style="display: none;"{/block:SearchPage}
{block:TagPage}style="display: none;"{/block:TagPage}>
This is displayed only on the index page.
</div>
{/block:IndexPage}
More info: http://ejdraper.com/post/280968117/advanced-tumblr-customization
I was was looking to show code on post pages, but not on the index, search, etc page (i.e. pages with multiple posts. Thanks to the above, I figured out how to do it and wanted to share in case it helps somebody else.
<div id="splashbox" style="display:none">
This is the content I wanted to show on the post pages only.
</div>
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (self.location.href.indexOf("post") > -1 ) {
document.getElementById('splashbox').style.display='block';
}
}
</script>
You can also do it just with CSS.
#box{
display:none;
}
.page1 #box{
display:block;
}
<body class="page{CurrentPage}">
<div id="box">
Only displayed in first page.
</div>
</body>
display:none will hide it but thats, a hidden element can still mess with your layout.
We could use the comment code* to turn the div into a comment that wont mess with anything.
*<!-- comment -->
ex.
{block:IndexPage}
{block:SearchPage}<!--{/block:SearchPage}
{block:TagPage}<!--{/block:TagPage}
<div style="width:400px; heigth:200px">
blah blah
</div>
{block:SearchPage}-->{/block:SearchPage}
{block:TagPage}-->{/block:TagPage}
{/block:IndexPage}
The {block:IndexPage} block, as you have discovered, is for all index pages. To target only the first page you can use {block:Post1} inline or {CurrentPage} in script. {block:Post1} will display only on the page with the first post, which achieves what you want. The <div> can then be styled to put it wherever you want.
{block:Post1}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:Post1}
Or:
<script>
if( {CurrentPage} == 1 ) {
//display div
};
</script>
I ended up killing off the {Block:IndexPage} tag altogether and changing the original div callout to this:
<div id="splashbox" class="mid2" style="display:none">
Followed by this script:
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (location.href == 'http://site.tumblr.com/' || location.href == 'http://site.tumblr.com') {
//alert('location match, show the block');
document.getElementById('splashbox').style.display='block';
}
}
</script>
This is solved by using div:not() operator.
The HTML Markup will be
{block:IndexPage}
<div id="banner">
<div class="banner_{CurrentPage}">
This Content will appear in only on home page
</div>
</div>
{/block:IndexPage}
Now add this CSS to
#banner div:not(.banner_1)
{
display:none;
}
{block:SearchPage}
#banner
{
display:none;
}
{/block:SearchPage}
{block:TagPage}
#banner
{
display:none;
}
{/block:TagPage}
The background: {CurrentPage} is a Tumblr theme variable which returns the page number of index pages (like 1, 2, 3, ...). Thus the home of any Tumblr blog is page number "1". Now I have defined the class of a div with this page number concatenated with a string "banner_" (Class can not be numeric. WTF why?) - making the class name "banner_1" on homepage. Next, in CSS, I have added display:none property to :not selector of that banner_1 class div. Thus excluding div with banner_1 class, all other div in under #banner div will disappear. Additionally, div with id #banner is hidden in search and tag pages.
Note: <div id="#banner" > is required. Without this, :not will hide all divs in the html.
Warning: IE users (is there anyone left?) need to change their habit. This is only supported in FF, Chrome, Safari and Opera.
I have implemented this in http://theteazone.tumblr.com/ The Big Banner (Tea is a culture) is absent in http://theteazone.tumblr.com/page/2
{block:IndexPage}
<script>
if( {CurrentPage} != 1 ) {document.write("<!--");};
</script>
<div id="banners">
blablabla
</div> -->
{/block:IndexPage}
Alternatively, you can use this tag: {block:HomePage}.
This block renders, as its name implies, on the home page only (ie not on search pages, tag pages etc).
References:
https://www.tumblr.com/docs/fr/custom_themes