I already made a photo gallery using a plugin which I want to show this gallery when user on_click my homepage button.
I am not sure how to achieve this please help me out here.
This is my button code:
<div class="ow-button-base ow-button-align-center">
<a class="ow-button-hover" target="_blank" id="introduction" onclick="intro_on">
<span>Click me to see gallery</span>
</a>
</div>
This is my photo gallery code:
<div class="huge_it_slideshow_image_wrap_1" style="max-height: 1800px; overflow: visible;">
<div id="huge_it_loading_image_1" class="display" style="display: none;"></div>
$('#introduction span').click(function(){$('#huge_it_loading_image_1').show();});
You could use the jQuery show() function:
$(".huge_it_slideshow_image_wrap_1").show();
but you need to set the display to none in your css file.
You do not need jquery for this simple task.
Input a script tag in the bottom of your document with some javascript code in it.
<script>
function intro_on() {
document.getElementById("huge_it_loading_image_1").style.display = 'block';
};
</script>
You also need to update the onclick in your html to "intro_on()" so it can be executed as a javascript function.
Related
It is pretty simple. I just want to have a clickable word/button that will activate an image to appear into a div. What is the cleanest way to do this? thanks
Quickest way would be to add a blank image tag where you want the image to appear, and then use jquery to add/change the source
$('#button').click(function(){
$('#imgonclick').attr('src', 'http://example.com/myimage.jpg');
});
whhere #button is a button with class button, and #imgonclick is an img tag with class of imgonclick
Jquery is super easy, but if you have to stick to JavaScript you can try something like this:
<div id="image"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
function displayBtn() {
document.getElementById("image").src = "something.gif";
}
OR... if the div already has an image src property set, just show it.
<div id="image" src="something.gif" style="display: none;"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
function displayBtn() {
document.getElementById("image").style.display = "block";
}
I'm a beginner with jQuery and I have this HTML:
<a class="a2a_dd" href="https://www.addtoany.com/share_save"><img src="//static.addtoany.com/buttons/favicon.png" width="0" height="0" border="0" alt="Share"/>Share</a>
<div id="share-btns">
<div id="facebook">
<a class="a2a_button_facebook"></a>
</div>
<div id="google_plus">
<a class="a2a_button_google_plus"></a>
</div>
<a class="a2a_button_twitter">
<div id="twitter"></div>
</a>
</div>
I am trying to use jQuery to make it so when you click on the .a2a_dd link, it will toggle the #share-btns div visibility. Here is my code:
(function($){
Drupal.behaviors.toggle = {
attach: function() {
$('.a2a_dd').click(function() {
$('#share-btns').fadeToggle();
});
}
};
})(jQuery);
The problem is, I have a grid of teaser articles all on the same page that all have this HTML on them and when I click on the .a2a_dd link on any of the teasers it toggles the #share-btns div on only the first teaser on the page. Is there a way to get jQuery to recognize the node that was clicked on so it can toggle the div from that same node? Any help would be greatly appreciated.
A quick fix using next(). You need to target the element right after the toggle link (according to your html structure).
$('.a2a_dd').click(function() {
$(this).next().fadeToggle();
});
Plunker example.
Is there any way to hide a div from source code at runtime
Using jquery, javascript or any other method.
Eg:
<div id="abc">
This will not be displayed on source as well as in page
</div>
By using jQuery remove() or hide() - the item is hidden from front end.
But i need to remove it from source...
I'm using drupal render method.
It is not possible to hide DOM elements in browser. You can only remove them using .remove() or hide with .hide() when rendered. But if DOM exist in code then you can not hide it in view source code component.
Here is one solution
In your body tag add onload event
<body onload='removeDiv()'>
<div id='abc'>
This will not displayed in source code as well as in web page.
</div>
<body>
Javascript
<script>
function removeDiv(){
var div = document.getElementById('abc');
div.remove();
}
</script>
<script>
$('.abc').hide();
</script>
If the .hide() and .remove() doesn't work for you. You can try this.
Make a parent div and set the html part empty
<div id="def">
<div id="abc">
This will not be displayed on source as well as in page
</div>
</div>
<script type="text/javascript">
$("#def").html('');
</script>
If you are using drupal the write a php if condition to hide the content of the div, example
<?php if(1){ ?>
<div id="abc">
This will not be displayed on source as well as in page
</div>
<?php }?>
I am currently building a website for an indie game development team I am working with.
Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.
When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.
I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.
The code below handles the click event,
<a href="#" >
<div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
</a>
And this is the div I want to be hidden and re-appear
<div id="formContainer" class="form container">
<div id="showForm" class="outer">
<div class="inner">
<form method="post" action="verify.php">
<table>
<tr>
<td class="intro">
<h1 class="header-orange">Liberico Alpha Application</h1>
<p class="body-text">So you think you have what it takes to brave the battlefield?
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.
Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:
<a class="clickable" href="#" >
<div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
</a>
And then, i've created a custom javascript toggle function with slideDown and up:
$('.clickable').click(function(){
var showFormObj = $('#showForm');
if(showFormObj.hasClass('active')){
showFormObj.removeClass('active');
showFormObj.slideUp();
}else{
showFormObj.addClass('active');
showFormObj.slideDown();
}
});
On the css part i hid the 'showForm' element:
#showForm {display:none;}
Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/
If you need to hide the form when page loads. For form container use
display : none
Eg:
http://jsfiddle.net/54EUC/1/
I have been researching and learning more and more about HTML 5, jQuery, CSS3, and the power of hiding and disabling certain elements when JavaScript is or is not disabled. (<noscript> tags)
My questions are,
How do I make a hyperlink ONLY work if JavaScript is DISABLED?
If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?
HTML
Simple enough, I hide my cart area and change the login link if the JS is disabled.
<!-- If JavaScript is disabled it will make the login link take you to a login page instead of a drop-down box. -->
<noscript>
<style>
.login-form, .js-enabled{
display: none;
}
.cart{
top: -80px;
}
</style>
<div class="cart">
<a href="#" id="cart_img">
<img src="img/bag.jpg" alt="Check Cart"
onmouseover="this.src='img/bag-gold.jpg'"
onmouseout="this.src='img/bag.jpg'">
</a>
Why HorseTack? |
About |
Contact |
Login
</div>
</noscript>
<!-- End JavaScript text -->
<div class="cart js-enabled">
<a href="#" id="cart_img">
<img src="img/bag.jpg" alt="Check Cart"
onmouseover="this.src='img/bag-gold.jpg'"
onmouseout="this.src='img/bag.jpg'">
</a>
Why HorseTack? |
About |
Contact |
Login
<div class="login-form">
<form class="login-frm">
<label><input type="text" placeholder="Username"></label>
<label><input type="password" placeholder="Password"></label><br>
<input type="submit" value="Login"><br>
New User?
</form>
</div>
</div>
JQuery
This makes the login-box slide down (just to avoid taking people to a login page unless they have to)
// Login Box Pop-Up
jQuery(document).ready(function() {
jQuery(".login-form").hide();
//toggle the componenet with class msg_body
jQuery(".login-box").click(function()
{
jQuery(this).next(".login-form").slideToggle(500);
});
});
What I would like instead of having that <noscript> tag and the content duplicated, just a way for the hyperlink to only work when there is no JavaScript.
I have already set the page up to let users know when their JS is disabled (like Stack Overflow has done)
Any questions about my question (hopefully I wasn't vague?) ask!
How do I make a hyperlink ONLY work if JavaScript is DISABLED?
If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?
Write a JavaScript function that causes the menu to be displayed. Make sure that it captures the first argument (which will be the event object).
Bind the function to the link as an event handler.
Call preventDefault() on the event object.
function (event) { /* display menu then ... */ event.preventDefault(); }
<noscript> tags
There are almost always the worst solution to a problem. Be progressive and unobtrusive.
You could show the link, and if javascript is enabled, hide it.
You can put the link inside a div, and if JS is enabled, remove the link and put an event to that div
Like:
<div class="link-holder">
Link
</div>
And jQuery:
$(document).ready()
{
$('.link-holder').text('').click(function(){
displayLogin(); //assuming displayLogin() has your function to, well, display the login
});
}