Pass to javascript function div class arguments

Question

I'm working on some website. I have a question. How to give class name to JS function. Here is my code:

<div class="grid-item">
    <div id="info">
        <div class="glyphicon glyphicon-search" style="hidden: hidden;">
        </div>
        <img onmouseover="show(this)" onmouseout="hide(this)" src="'smiley.gif'" />
    </div>
</div>

My JS function look like this

function show(x) {
    x.style.hidden= visible;
}

function hide(x) {
    x.style.hidden= hidden;
}

But in onmouseover and onmouseout i do not want to use this. I what to show or hide

<div class="glyphicon glyphicon-search" style="hidden: hidden;"></div>

from html. How to do this? My idea is to give to this div id and then that id to pass to function, but how to do this.

Remeber that i will have a lot of div tags (), for every picture.

And also how to position that div on right top corner of image?

Thanks.

i do not understand the question... you want to hide the images with JS? or with HTML? by the way, x.style.hidden=visible and x.style.hidden=hidden work? si do not think you use the correct syntax — florin.prisecariu
– florin.prisecariu, Commented Feb 24, 2016 at 15:11
And also how to position that div on right top corner of image? Are you aware that none of the images in your html will render because you need to use absolute (exact) urls to any image you post here, right? Please post JavaScript/jQuery, CSS, and HTML that would be relevant to your question. Create a demo using any or all of the following services: jsFiddle.net, CodePen.io, Plunker.co, JS Bin or a snippet (7th icon located on the text editor toolbar or CTRL+M). — zer00ne
– zer00ne, Commented Feb 24, 2016 at 16:13

rrk · Accepted Answer · 2016-04-18 05:35:54Z

1

If you are using jQuery, then use this.

function show(x) {
    $(x).prev('div.glyphicon.glyphicon-search').show();
}
function hide(x) {
    $(x).prev('div.glyphicon.glyphicon-search').hide();
}

But it is preferred to do something like this. Add a class to these images smiley.

<img class="smiley" src="'smiley.gif'" />

Then

$('img.smiley').on('hover', show, hide);

function show() {
    $(this).prev('div.glyphicon.glyphicon-search').show();
}
function hide() {
    $(this).prev('div.glyphicon.glyphicon-search').hide();
}

or using the mouseover / mouseout events and event delegation,

$(document)
    .on('mouseover', 'img.smiley', show)
    .on('mouseover', 'img.smiley', hide);

edited Apr 18, 2016 at 5:35

answered Feb 24, 2016 at 14:50

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zer00ne · Accepted Answer · 2016-02-24 17:44:18Z

Look on the demo, it has all the details. Good luck.

var btn = document.querySelector('.btn');


function show(x) {
  x.style.visibility = 'visible';
}

function hide(x) {
  x.style.visibility = 'hidden';
}

* {
  background: transparent;
}
.grid-item {
  width: 100%;
  height: auto;
}
.info {
  position: relative;
}
.btn,
.logo {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
}
.btn {
  right: 20%;
  top: 15%;
}
.logo {
  right: 5%;
  top: 10%;
}
article { margin-top: 5%; }

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">



<div class="grid-item">
  <div id="info" onmouseover="show(btn)" onmouseout="hide(btn)">

    <button type="button" class="btn btn-default btn-sm">
      <input type="search" /><span class="glyphicon glyphicon-search"></span> Search
    </button>

    <img class="logo" src="http://static.tumblr.com/7882552ad1b500434662c7b0ae2f3d74/pvsmty4/cp3n1htcy/tumblr_static_and_heres_the_transparent_one__48af21dc5f513bb7b872ca0128f7fcf9.png" width="100" />
  </div>
</div>
<h1>Fixed:</h1>
<article>
<ul>
  <li>CSS Property <code>visibility: hidden | visible | collapse (Tables Only)</code></li>
  <li>There is no such thing as the <del>hidden</del> property only hidden as a value.</li>
  <li>If your question concerns images, then you must include them in your code as an absolute url <samp>(ex. http://imgur.com/path/to/img.png)</samp></li>
  <li>Smiley face image is on the right side as requested.</li>
  <ul>
  <li>Set <code>position: relative;</code> to the parent element of target element.
  <li>Set the target element to <code>position: absolute;</code></li>
    <li>Position target element with <code>top, bottom, left, right</code>
      </ul>
      <li>See <a href="https://css-tricks.com/almanac/properties/v/visibility/">Visibility</a>
      <li>See <a href="https://css-tricks.com/almanac/properties/p/position/">Position</a>
    
  </ul>
</article>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Collectives™ on Stack Overflow

Pass to javascript function div class arguments

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related