How do I add a fadeIn effect in this javascript code? - javascript

I got the following javascript code:
function myProfileIn() {
var showme = document.getElementById("myProfileTop").fadeIn(2000);
showme.style.display = "inline";
var showme = document.getElementById("myProfileMain").fadeIn(2000);
showme.style.display = "inline";
}
This code works on my buttons as "onclick="myProfileIn();" so they get to be visible but i also want to include a fadein effect when the button is clicked.
That is why i included ".fadeIn(1000)" but this is not working.
Here is the button which activates the function:
<div id="profileButtonArea"><div id="profileButtonBox"><img onclick="myProfileIn();" id="profileButtonImg" src="<?php echo $userPath; ?>" /></div></div>
And here are the two elements(divs) which are blended in:
<div id="myProfileTop" style="display:none;"></div>
<div id="myProfileMain" style="display:none;"></div>

The issue you have is that fadeIn() is a jQuery method. It's not available on a standard HTMLElement object. Also note that if you want to toggle the element's visibility on successive clicks use fadeToggle().
You should also use unobtrusive Javascript to attach your event handlers as on* event attributes are now considered outdated. As you've tagged the question with jQuery. Here's a working example for all of the above:
$(function() {
$('#profileButtonBox img').click(function() {
$("#myProfileTop, #myProfileMain").stop(true).fadeToggle(2000);
});
});
#myProfileTop,
#myProfileMain {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profileButtonArea">
<div id="profileButtonBox">
<img id="profileButtonImg" src="yourimage.jpg" title="click me" />
</div>
</div>
<div id="myProfileTop">myProfileTop</div>
<div id="myProfileMain">myPropfileMain</div>

Related

jQuery - document.on hover toggle method - error

So, I've been trying to create a function in jQuery where when you hover over an element, it toggles an img, and when you exit the element, the img gets toggled again. The only issue is that this all happens after a $(document).on slector. I've tried using $(document).off().on but it's not working. Here's my code:
$(document).on('mouseover', '.addressLink', function() {
var redirectSelector = $(this).children().last();
redirectSelector.toggle('fast');
$(this).mouseleave(
function() {
redirectSelector.toggle('fast');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>
Click For Location <img src='download.png' class='redirect display'>
</a>
</div>
This function works the first time, but then the img toggles and toggles again and again, doing it one more time for every mouseover! The event fires once, then twice, then three times, and so on. Thank you for your answers.
I made example for you.
$(document).on('mouseover mouseleave', '.addressLink', function(e) {
var $img = $(this).find('img');
if(e.type === 'mouseover') {
$img.stop(true, true).slideDown('fast');
}else {
$img.stop(true, true).slideUp('fast');
}
});
.addressLink img {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>Click For Location<img src='https://via.placeholder.com/150X30' class='redirect display'></a></p>
</div>
$(document).on('mouseenter mouseleave', '.addressLink', function() {
var redirectSelector = $(this).children().last();
redirectSelector.toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>
Click For Location <img src='download.png' class='redirect display'>
</a>
</div>
I would suggest using a single delegate for the mouseenter and leave, since all you are doing is toggling a class. This avoids the duplicate binding issue. There is still a little flakyness with the toggle due to the element moving and the mouse may accidentally leave the target while it is redrawing, but that's an issue with styling or such that can be addresses as a secondary issue.
Try this :
$('.addressLink').hover(function(){
var redirectSelector = $(this).children().last();
redirectSelector.show('fast');
}, function(){
var redirectSelector = $(this).children().last();
redirectSelector.hide('fast');
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>
Click For Location <img src='download.png' class='redirect display'>
</a>
</div>

jquery slideToggle opens all divs instead of just the div that is required

I have a page that can have a variable number of <div> the idea is people can click the + symbol which is an <img> then the div that is linked to the img tag will display.
I currently have:
PHP/HTML
$plus = '<img src="images/plus.png" class="clickme" width="20px" height="20px">';
$table .= '<div>'.$plus.'</div>';
$hidden .= '<div class"diary">-Content-</div>';
JS
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$( ".clickme" ).click(function() {
$( ".diary" ).slideToggle( "slow", function() {
});
});
});
</script>
This obviously opens all divs and not just the one that is clicked on. I have looked at other similar questions on here and have tried a number of variations such as:
$(document).ready(function(){
$(".clickme").click(function(){
$(this).next(".diary").toggle();
});
});
However, when I try these it just stops working altogether. i.e. none of the divs slide up or down. I see the examples work on JS Fiddle but as soon as i apply it to my page I get nothing.
I am possibly doing something really dumb for it not to work but can't see what.
thanks for any help.
The HTML output should look like
<div>
<div>
<table>
<img class="clickme">
</table>
</div>
<div class="diary">
<table> content </table>
</div>
<div>
(based on tht HTML provided)
Best way would be to add an attribute with matching indexes to both elements
<div>test toggle
<div class="clickme" data-index="1">click me</div>
<div class="toggle" id="obj_1">toggled field</div>
</div>
and then in the JQuery:
$(function () {
$(".clickme").click(function () {
//get number from clicked element's attribute
var index =$(this).attr('data-index');
//select element with id that matches index and toggle
$('#obj_'+index).toggle();
});
})
After looking at your code, i can see that the slideToggle call is maded on .diary class which is probably applied on each of your elements.
I suggest you to put your diary div inside the $plus div then use jquery children or simply give your .diary divs a unique id and use the id attribute for your
toggle.
EDIT:
Here is a simple html output:
<div class="clickme">
<div class="diary">CONTENT HERE</div>
</div>
Add this in the CSS:
.clickme {
background: url('images/plus.png') no-repeat top left;
min-width: 20px;
min-height: 20px;
cursor: pointer;
}
Script tag:
<script>
$(function() {
$(".clickme").click(function() {
$(this).children().slideToggle("slow");
});
});
</script>
Note that i'd let the diary class for your usage and styling purpose but it's not used anywhere.

How to change CSS of child element <span> inside parent <div> element Using jQuery onclick event?

I have two menu icons, both classed .menuentry, with the IDs #topicicon and #searchicon, in a menubar. Beneath them are two larger divs, #topiclist and #searchform, both initially set to display:none;.
What I would like to do is click each menu icon and display the corresponding larger div underneath, as well as getting rid of the other larger div if it has been display previously.
So, for example, when I click #topicicon, it displays #topiclist and hides #searchform.
The code is being used on this website, in the menubar at the top: http://bonfiredog.co.uk/bonfog
And this is the code that I am using.
HTML:
<div id="topicicon"><img src="topic_icon.png" /></div>
<div id="searchform"><img src="search_icon.png" /></div>
<div id="topiclist"></div>
<div id="searchform"></div>
CSS:
#topiclist {
display:none;
}
#searchform {
display:none;
}
jQuery:
$("#topicicon").click(function(){
$("#topiclist").css("display", "visible");
$("#searchform").css("display", "none");
}, function(){
$("#formlist").css("display", "hidden");
});
Not working as of now...
You have to make two click handlers for #topicicon and #searchform and use .hide() and .show() as shown :-
$("#topicicon").click(function(){
$("#topiclist").show();
$("#searchform1").hide();
});
$("#searchform").click(function(){
$("#topiclist").hide();
$("#searchform1").show();
});
and you are using two div's with same id's i.e searchform so change the id of second searchform div to say searchform1 and try above code.
You could avoid having to write multiple click handlers, and reuse across different components with the following:
$(function () {
$('.showRelated').click(function () {
var relatedId = $(this).data('rel');
$('.related').hide(); // hide all related elements
$(relatedId).show(); // show relevant
});
});
.related {
display: none;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="topicicon" class="showRelated" data-rel="#topiclist"><i class="fa fa-newspaper-o"></i></div>
<div id="searchicon" class="showRelated" data-rel="#searchform"><i class="fa fa-search"></i></div>
<div id="topiclist" class="related">Topic List</div>
<div id="searchform" class="related">Search Form</div>
"visible" is not correct value for display propriety. You should add "display: block", or "display: inline-block", or "display: inline" or any other value that is admitted by display propriety.

How to use Javascript or Jquery to toggle the visibility of a html div

I'm creating a basic site and I've got the following script that hides a div:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
Show/Hide Description
<div id="description">
<br>
<br>
<p>This is a test paragraph</p>
</div>
When I load the page, the default is that the text is shown. How can I hide the text inside the div each time the page is loaded?
I want the user to manually click the button to view the text.
EDIT:
I've now added a picture of a + symbol, so that a user can click the + and the text appears by using the following lines:
<h4>Backstory</h4>
<img alt="" style="width: 20px; height: 20px;" src="./images/headerExpand.png" a href="#" onclick="toggle_visibility('backstory');">Show/Hide Description</a>
<div id="backstory" style="display: none">
<br>
<p>This is a new block of text</p>
</div>
The ./images/headerExpand.png is the icon of the + symbol
How would I change the + icon to a - icon once the + icon has been clicked?
Thanks.
set the display to none
<div id="description" style="display: none">
A redesigned solution might look like
<!-- Add a class toggler and the id of the target element as the href-->
Show/Hide Description
<!-- Add a class hidden so that the element is hidden when the page loads -->
<div id="description" class="hidden">
<br/>
<br/>
<p>This is a test paragraph</p>
</div>
CSS
.hidden {
display: none;
}
then jQuery script
// dom ready handler
jQuery(function () {
//register a click handelr for all anchor elements with class toggler
$('a.toggler').click(function (e) {
//prevent the default action of the event
e.preventDefault();
//togger the visibility of the element targetted by the href
$($(this).attr('href')).toggle()
});
})
Demo: Fiddle
use symply CSS :
<p style="display:none;">This is a test paragraph</p>
you have 2 options , set the css property right in the html like the other answers
<div id="description" style="display: none">
or wrap your javascript in something to tell the page to run the stript on page load
using jQuery
$(document).ready(function(){
//your code
});
or
$(function(){
//your code
});
or regular old javascript
window.onload = function(){
//your code
});

Different style of opening popup window

I display a popup window in a simple format. I want to apply different format of opening popup a window. How can I apply format or style so that it looks very good when pop window opens? The following is my source code:
<div onMouseOver="show('healing')" onMouseOut="hide('healing')">
<div id="healing" class="bgdiv" >
<div id ="title" class="Title" >Healing</div>
<img class="img" src="images/healing.bmp">
<div class="description" >Welcome Sir.</div>
</div>
</div>
javascript code
<script language="JavaScript">
function show(id)
{
document.getElementById(id).style.visibility = "visible";
}
</script>
You should take a look at JQuery (http://jquery.com/). JQuery is a Javascript framework and you can use effects for displaying elements like fade, slide, show/hide.
All you have to do is change your code a little bit (Jquery solution):
<div id="showhealing">
<div id="healing" class="bgdiv">
<div id ="title" class="Title" >Healing</div>
<img class="img" src="images/healing.bmp">
<div class="description" > Welcome Sir.</div>
</div>
</div>
<script>
$('#showhealing').hover(
function() { $('#healing').show(500) }, function() { $('#healing').hide(500) }
);
</script>
When you use JQuery UI, too (it's a extension for JQuery) you have much more effects. (Take a look here: http://jqueryui.com/demos/effect/).
To use the Effects of JQuery UI you need to update your script like this:
<script>
$('#showhealing').hover(
function() { $('#healing').show("explode", {}, 500); }, function() { $('#healing').hide("explode", {}, 500) }
);;
</script>

Categories

Resources