Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Chris Cullen
@123xylem
@ctram hi
when i hover on the image i want the title to appear
@ctram so im trying to target the images title attribute
and show it on hover
Adel
@AdelMahjoub
@123xylem easiest using javascript I guess, but maybe because I'm not really good with css
@123xylem but if all those data attributes are rendered with a templating engine, put the title in the center of the image with display: none, and on hover set it to display block
@123xylem kinda of a barbaian css but it should work
Chris Cullen
@123xylem
@AdelMahjoub its wordpress so its not so customisable
Adel
@AdelMahjoub
@123xylem not even an inline script ?
Chris Cullen
@123xylem
well i have a additional css area to add css
can i add a script to that?
Adel
@AdelMahjoub
@123xylem if you can read the php file, you could easily add a script under the images section
Chris Cullen
@123xylem
Im customising a plugin
Adel
@AdelMahjoub
@123xylem open the php file and add a script tag and the logic inside a function like this, so nothing unexpected should happen
(function(){
/* script */
})()
Chris Cullen
@123xylem
@AdelMahjoub its a bit above me
its a plugin so I dont have access to the php files
Adel
@AdelMahjoub
@123xylem simple, all inline javascript is parsed while the browser is building the dom, you edit that php page and add <script></script> just under the images section
@123xylem and wrap the javascript that you'll write inside a function like above
Chris Cullen
@123xylem
@AdelMahjoub I could add custom html
and add the images in it maybe
instead of the envira plugin
Adel
@AdelMahjoub
@123xylem if you can add custom html, then you can add inline scripts
@123xylem this is an inline script
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div></div>

  <!-- this is an inline script tag -->
  <script>
    /* javascript code */
  </script>

</body>
</html>
@123xylem it will be parsed by the browser when it parses the html to build the dom
@123xylem and it will be executed
Chris Cullen
@123xylem
@AdelMahjoub thanks but even the custom html wont work for some reason.. Wont let me type in it
CamperBot
@camperbot
123xylem sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 641 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
Chris Cullen
@123xylem
I think I just need a way to select the title attribute with a hover
Adel
@AdelMahjoub
@123xylem I don't know much about wordpress, but I guess that the templating is similar than any php app, you open the wp_content folder, you find the file in which the image gallery is written, and you edit it. Unless you don't have access to the files
Chris Cullen
@123xylem
@AdelMahjoub k going into the dark backend
@AdelMahjoub i havent used jquery in ages
what kind of code will i use?
Adel
@AdelMahjoub
@123xylem use javascript if you don't feel using jquery
Chris Cullen
@123xylem
getelementby id (title attribute) ?
Adel
@AdelMahjoub
@123xylem yes, if you struggle open the dev tools and console.log anything you doubt
Chris Cullen
@123xylem
. title on(hover) .addclass (show)
o boyt
Adel
@AdelMahjoub
@123xylem :smile: use javascript, your text editor will do the rest if it have javascript code completition
Chris Cullen
@123xylem
could u give me a rough sample of what i have to do?
I think it will be selecting something making it a variable then adding a class to it that has different style
Adel
@AdelMahjoub
@123xylem select the image direct container, set it to position relative, create a span set it to position absolute, append the span to the image container, selet the text of the image titile attribute, set the span textContent to that title, on hover set the span display to block or any, on leave set it back to display none
@123xylem it depends on how the gallery is layed
Chris Cullen
@123xylem
<img id="envira-gallery-image-445" class="envira-gallery-image envira-gallery-image-1" data-envira-index="1" src="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" data-envira-src="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" data-envira-gallery-id="444" data-envira-item-id="445" data-envira-caption="Web Development" alt="HTML5, CSS3,  JavaScript,  WordPress,  NodeJS, Express  MongoDB,  Site Authentication,  Git GitHub" title="Web Development" itemprop="thumbnailUrl" data-envira-srcset="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg 400w,https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg 2x" srcset="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" style="opacity: 1;">
Thats what i have to select with JS
Adel
@AdelMahjoub
all the attributes ?
Chris Cullen
@123xylem
just title really
but what im saying is I have to make JS target that element
Adel
@AdelMahjoub
@123xylem those attributes are generated by the plugin you were using, it is too lazy to create classes, so it flooded it with data-x-*, so it will be easier to target
Chris Cullen
@123xylem
and I dont really know how lol