Develop Reference

Coding Two buttons with the same function but different classes

I'm trying to make it so that one of the tabs on my portfolio website creates a drop down menu. I was able to make it so that when people click on the picture, it makes a dropdown menu. However, I also wanted the same thing to happen when they click on the text as well. So my problem is that I have two buttons with different classes that I want to have the same function. I thought I could do that with the javascript I have now, but it doesn't seem to work. Here's a link to a porotype I created https://iancoffman.com/digitalart2.html. The code should be viewable publicly.
What am I doing wrong?

What code are you using for your drop down menu that you want to show when clicking? You could use basic JavaScript to trigger the same function when you click each item.
A basic function example would be:
<script>
function myFunction() {
document.getElementById("menu").style.display = "block";
}
</script>
You could attach this function to a div that contains both the text and image like:
<div onclick="myFunction()">
<p>Text To Click.</p>
<img src="images/paint-symbol.png" alt="paintings">
</div>
<div id="menu" style="display:none;">Dropdown Menu</div>
Or you could add this function to each item if they are not connected:
<p onclick="myFunction()">Text To Click.</p>
<img src="images/paint-symbol.png" alt="paintings" onclick="myFunction()">
<div id="menu" style="display:none;">Dropdown Menu</div>
Not sure what exactly you are trying for but this might get you started with the concept.

Sort DIV's after clicking a button which moves you to another site

Say I have 2 pages:
mysite.com/site1
mysite.com/site2
On site 1 I have a few buttons (all of them redirecting to site2)
On site 2 I have a few boxes with content (divs)
Is there a simple way to only show the divs I want to on site2 based on which button was clicked on site1? I remember something with the redirect?
For example, when I click button one, I end up on site2 with only box 2 and 3 visible, but if I'd've clicked button 2, I only see box 1 on site2.

This could possibly be a huge answer, but I will try to simplify it.
Basically, you want to use ajax- $.load here and with that you can just get content of other page.
Say you have below markup in site1
<button id="button1" class="btn" data-load="#div1">Load Div1 from Site 2</button>
<button id="button2" class="btn" data-load="#div2">Load Div1 from Site 2</button>
<div id="loadContent"></div>
Now what you can do is onclick of any button above fetch its data-load value and make a valid url and pass it through $.load. For Example.
$('.btn').on('click',function(){
var url="/site2"+$(this).data('load');
//url here will be www.mysite.com/site2#div1 or www.mysite.com/site2#div2 based on button clicked
$('#loadContent').load(url,function(){
//#div1 from site2 will be loaded within loadContent element
//callback function after content is loaded
})
//or just $("#loadContent").load(url);
});

You can have each button send a different query string to site 2 representing the allowed divs (e.g. mysite.com/site2?div1=true&div2=false)
Of course you will have to handle the query string on site2's javascript...

You can set id's for the elements in your 2nd page and then do the following:
First redirect to your page with the following Button:
<button onclick='window.location="page2.html#yourid"' >klick me</button>
Use the following Script in your page2.html:
var url=document.URL;
if(url.substr(url.indexOf("#"))=="#id1")
{
//delete Elements
}
else
{
if(url.substr(url.indexOf("#"))=="#id2")
{
//delete Elements
}
else
{
if(url.substr(url.indexOf("#"))=="#id3")
{
//delete Elements
}
}
}
replace the id's with the ids, you have chosen and delete the Elements in the if statements, which you want to delete:
document.getElementById("id#").remove();

The problem is it is a wp page and the button page looks like this (site 1):
<div class="col-sm-12" onclick="window.location.href='<?=get_permalink($child->ID)?>'">
<div class="r-targets-block-content">
<div class="r-targets-block-bg" style="background:url('<?=$thumbnail?>') center top no-repeat"></div>
<div class="r-targets-descr-block">
<div class="r-targets-title"><?=$child->post_title?></div>
<div class="r-targets-subtitle"></div>
<div class="r-targets-button-block">
<?=r_arrowed_button(
get_permalink($child->ID),
"SEE MORE",
["standard", "small", "border-yellow", "arrow-right"]
)?>
</div>
</div>
<div class="r-targets-recomendation-block-null"></div>
</div>
</div>

Rendering different partials in same div

I have a few buttons like this:
<div class="button" id="picture-button">
<div class="button" id="text-button">
<div class="button" id="video-button">
I then have some JS:
$('.button').click(function () {
$('.modal').toggle('slide', {
direction: 'top'
}, 300);
});
and a modal that the buttons open up:
<div class="modal">
<%= render 'picture_form' %>
</div>
The problem is the rendered partial has to correspond to the button clicked eg. picture-button renders picture-form. Is there an easier way to do this than having separate modals and js for each partial?

Unfortunately, rendering is done server-side before your user gets the page, so your use-case isn't possible. What you should do is either use an AJAX call to query the server for the data to put in the modal when a user clicks the corresponding button, or simply render it all at once as different modals, and only show the one the user clicks on.
For example, have three div modals with ID #button1, #button2, #button3 and on button click show whichever corresponds to the button.

Cannot trigger click for dynamic content generated

I have this situation that i need to trigger click on some element from clicking other element. More concretly - i have gallery with thumbnails. When you hover over the thumbnail - the description box covers the whole thumbnail. After that i need to trigger click event on the thumbnail so it can run lightbox. To achieve this i need to do something when i click on the description.
This is the html:
<div id="gallery">
<!-- Content from handlebars that is loaded dynamicaly from template file via ajax -->
<a class="lightbox lightbox-frame" href="img/gallery/{{filename}}.jpg" data-lightbox="gallery" data-category="{{category}}">
<img src="img/gallery/thumbs/{{filename}}.jpg" alt=""/>
</a>
<p class="gallery-image-description">{{description}}</p>
<!-- Content from handlebars -->
</div>
I am trying this but it does not work. It works for statick content but this content is loaded via Ajax and then compiled with Handlebars:
('#gallery').on('click', '.gallery-image-description', function () {
$(this).prev().click();
});
So the question is: Do you have any idea how i can trigger click event on dynamicaly generated content, by clicking on other element ?

I'm not sure this will help because I've never used lightbox, and I can't be sure that there isn't an interaction between lightbox and the JS.
But here is a FIDDLE that
Has a dynamically generated div/image
On hover, covers the image with text
A click on the parent pops up an alert
JS
$('.imagestuff').on('click', function(){
alert('clicked');
});

One DIV - three different contents

On one of my web pages, I have buttons at the top, say A, B and C.
Below it, I would like to display varying content in a common DIV. What is displayed is determined by which of the buttons is clicked. There is no order in which the buttons can or will be clicked.
Each of Contents A, B and C are php driven pages with menu options, forms, etc. The forms could be partly filled up after which User could navigate away from the page by clicking one of the above buttons and then clicking another button to come back to the form - I need to retain values of partially entered data.
Could someone share code (or point me in the right direction) where:
1) How do I ensure that Content A is displayed when page is initially loaded?
2) How do I define the page?
So far, I have defined a container DIV for the area where the content is to be displayed. And thereafter three DIVs where each of the three php pages are loaded.
My problem is that All 3 DIVs are displayed and I can scroll up and down to view them.
I can handle 2 DIVs but 3 DIVs challenge me.
Thank you in advance.
Uttam

Check out this awesome jquery plugin which will add some kind of parallax effect to your page.
fullpage.js
http://alvarotrigo.com/fullPage/#4thpage

The layout
<button class="toggleButton" data-target="div1">A</button>
<button class="toggleButton" data-target="div2">B</button>
<button class="toggleButton" data-target="div3">C</button>
<div id="div1" class="toggleDiv">
Content A
</div>
<div id="div2" class="toggleDiv" style="display:none">
Content B
</div>
<div id="div3" class="toggleDiv" style="display:none">
Content C
</div>
The JavaScript code:
$(function(){
$('.toggleButton').click(function(){
var target = $('#' + $(this).attr('data-target'));
$('.toggleDiv').not(target).hide();
target.show();
});
});