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
Adel
@AdelMahjoub
@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
Adel
@AdelMahjoub
@123xylem you'll find out, so you refresh and review your javascript
Chris Cullen
@123xylem
so i say getelementbyattribute('title')?
Adel
@AdelMahjoub
@123xylem text editor + google and it'll be done in no time
@123xylem an occasion to review some js, you are building a portfolio and a blog about web development, so it is good time to refresh
Chris Cullen
@123xylem
@AdelMahjoub hehe i know
its jus that im looking at a big Php file and I dont have a clue what it does
Adel
@AdelMahjoub
@123xylem ctrl+f and search for those img tags
Chris Cullen
@123xylem
img not found
its very bland Php
Adel
@AdelMahjoub
@123xylem not the plugin file
@123xylem search in the templates
@123xylem the templates are rendered, so you look for the one you want, and search img tags
Chris Cullen
@123xylem
@AdelMahjoub ok
checking
@AdelMahjoub I dont think its that simple.. Ive looked for the file and cant find it... the images are part of the plugin and encased in loads of classes etc
Adel
@AdelMahjoub
@123xylem nothing could stop an inline script unless some csrf setups, if you knwo where the images will be rendered it should work
Adel
@AdelMahjoub
@123xylem add the script in the footer