We Keep Coding

Place a button and its div with one command

Currently, I have a button class which lets me place a clickable button inside a sentence, and a div class which lets me add content to the button which I placed at the end of the paragraph containing the sentence.
This is an example of how I use them
Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?
When this text is displayed on the page, the two sentences are placed inside two different paragraphs, so the div object is placed between them.
Here is a snippet with the css classes and the javascript.
( function() {
coll = document.getElementsByClassName("col");
conn = document.getElementsByClassName("con");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].setAttribute('data-id', 'con' + i);
conn[i].setAttribute('id', 'con' + i);
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = document.getElementById(this.getAttribute('data-id'));
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
} )();
.col {
cursor: help;
border-radius: 0;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: red;
}
.con {
padding: 0 1em;
max-height: 0;
overflow: hidden;
transition: .3s ease;
background-color: yellow;
}
Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?
I wonder if it is possible to implement a shortcut to place the two objects with one command, that is to obtain the previous example by using something like this
Try to click [[THIS|nice!]] and see what happens.
Did you try?
What I mean is that the command [[THIS|nice!]] should place the object <button class="col">THIS</button> in the same position and the object <div class="con">nice!</div> at the end of the paragraph containing the command.
Is it possible to implement such a command (or a similar one)?
EDIT
I forgot to say that the content of the button, ie what is written inside the div, should also be possible to be a wordpress shortcode, which is a shortcut/macro for a longer piece of code or text.

Using jQuery, closest() find the nearest <p> element and add <div class="con">nice!</div> after <p> element. To toggle you can use class active and add or remove .con element.
$('.col').click(function(){
let traget = $(this).closest('p');
if(traget.hasClass('active')) {
traget.removeClass('active');
traget.next('.con').remove();
} else {
traget.addClass('active');
traget.after(`<div class="con">${$(this).data('message')}</div>`);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Try to click <button class="col" data-message="Hello">THIS</button> and see what happens.</p>
<p>Did you try?</p>

You usually dont use div to type text. you use it to define areas or group items. you could obtain what youre asking for in a 1 sentence like this:
html
<h1> some random text <a class="btnID">button</> some more text<h1>
css
.btnID {
color: red;
}

Prevent children divs from moving while div toggle

I'm new and have I think very simple problem to solve.
I have 4 buttons to show/hide each panel. What should I do to prevent child divs from moving to te left while hiding some div?
I prefer them to stay at the initial position.
This is my code:
HTML:
<button class="panel-button" data-panel="panel1">1</button>
<button class="panel-button" data-panel="panel2">2</button>
<button class="panel-button" data-panel="panel3">3</button>
<button class="panel-button" data-panel="panel4">4</button>
<div class="wrapper">
<div id="panel1">1</div>
<div id="panel2">2</div>
<div id="panel3">3</div>
<div id="panel4">4</div>
</div>
JS:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggle();
});
});
CSS:
.wrapper {
overflow: hidden;
width: 420px;
}
.wrapper > div {
width: 100px;
height: 100px;
background: green;
float: left;
margin-left: 5px;
margin-top: 10px
}

Apply css rule opacity = 0; to the div, instead of hiding it.
Like this:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
pnl.css('opacity', pnl.css('opacity') == '0' ? '1' : '0');
});
Solution for clickability issue:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
if(pnl.is(':visible'))
$('<div></div>').appendTo(pnl).width(pnl.width());
else
pnl.next().remove();
pnl.toggle();
});

But still you can use another approach
You can use the visibility property in CSS to achieve this as shown in the below Fiddle link : link
JS Snippet:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
console.log($('#'+panelId).css('visibility'));
if($('#'+panelId).css('visibility') === 'hidden') {
$('#'+panelId).css('visibility','visible');
}
else {
$('#'+panelId).css('visibility','hidden');
}
});
});

The CSS visibility is designed to keep the space a DOM object occupies, but not actually rendering it. Opacity changes its appearance, but not its behavior (eg. still clickable).
So instead of .toggle(), combine visibility with jQuery's .toggleClass():
jsFiddle solution
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggleClass('hideMe');
});
});

Selecting child of previous parent jQuery

Lately I've been trying my hand at animation using CSS and jQuery, it went well, however, now I want to do a bit more.
That is, once the user clicks information should show up on top of the image.
At the moment, I just have a few tags on which I perform the animations and class toggles.
My question is, I've thought about doing the following:
<div class= "singleImage">
<img src.... class="actualImage">
<p>text to put over the image</p>
</div>
This would be done per image which means that I'll have about 5 of them with different images.
However, I don't know how to go about selecting the previous element of class "actualImage".
Has anyone got any suggestions?
Thank you

Use the jQuery prev function. Example: Assume you want to select the image previous to the second image:
var foo = $(".singleImage").eq(1);
var bar = $(foo).prev().find('.actualImage');
Fiddle

Try this:
$('singleImage').children('.actualImage').prev();

I'm not sure why you are trying to select the previous element, but you could do something akin to this:
Bind a function to the click event for the element containing your image and caption.
Inside this function, toggle the caption.
Also, bind a click event handler to the body to detect clicks "off" the containing element.
HTML:
<a href="#" class="has-caption">
<img src="http://placehold.it/300x300" />
<span class="caption">This is a caption</span>
</a>
CSS:
a.has-caption { position: relative; }
a.has-caption .caption {
background: rgba(0, 0, 0, .25);
bottom: 0;
color: #fff;
display: none;
height: 20px;
left: 0;
line-height: 20px;
position: absolute;
width: 100%;
}
a.has-caption img { vertical-align: bottom }
JavaScript
$('a.has-caption').on('click', function(e) {
e.preventDefault(); e.stopPropagation();
var self = $(this)
, tmpId = 'toggle-' + Date.now();
self.addClass(tmpId);
$('span.caption', self).toggle();
$('body').one('click', function(e) {
if (!$(event.target).closest('.' + tmpId).length) {
$('span.caption', '.' + tmpId).hide();
self.removeClass(tmpId);
};
});
});
http://jsfiddle.net/83s7W/

Change href when anchor is clicked

I have a question about how I can dynamically change a href="" in a button.
The jsfiddle below shows a button fixed at the bottom of the viewport starting at the landing page:
http://jsfiddle.net/Hm6mA/3/
The html of the button is like so:
<div class="button">
<a href="#first" class="" style="width: 80px; height: 80px; opacity: 1;">
<img src="img/down.png" alt="down">
</a>
</div>
When it is clicked I want it to scroll to the next section and change the href="" to the following section of the page. So, when it is first clicked, the href will change to #second. It would obviously also need to change when the user manually scrolls past a section.
This is for a single page website. How would I go about such a thing?

Use .prop() to change its value
$(".button").on('click', function(){
$('.button').find('a').prop('href', '#services');
});
Demo

You can use fullPage.js plugin to achieve what you want. Maybe it is faster than coding it from cero :)
Demo fullPaje.js
Page

I am not used to jquery. Here is a pure javascript solution. It surely changes the hash value.
<body>
<div id="sections">
<section id="s100">asdfasd</section>
<section id="s101"></section>
<section id="s102"></section>
<section id="s103"></section>
<section id="s104">asdfasdasdfsdf</section>
<section id="s105"></section>
</div>
<div class="nav-bar">
<a id="next-button" class="button" href="#s100">Next</a>
</div>
<script type="text/javascript">
var sections = document.getElementById("sections");
var nextButton = document.getElementById('next-button');
sections.onscroll = function (evt) {
}
var counter = 100;
var limit = 105;
// closure
nextButton.onmouseup = function (evt) {
var incCounter = function () {
// add your custom conditions here
if(counter <= limit)
return counter++;
return 0;
};
var c = incCounter();
if(c != 0)
this.setAttribute('href', "#s" + c);
}
</script>
</body>
CSS
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#sections {
height: 50%;
width: 100%;
overflow: scroll;
}
.nav-bar {
margin: 30px 20px;
}
.button {
text-decoration: none;
border: 1px solid #999;
padding: 10px;
font-size: 120%;
}

I have written a small jQuery plugin for that, just pushed it to GitHub. https://github.com/ferdinandtorggler/scrollstack
What you basically want to do is calling
$('.button').scrollstack({stack: ['#first', '#second', ... ]});
You dont even need the link when you call it on the button. So check it out and let me know if it works for you. ;)
Here you can try it and read more: http://ferdinandtorggler.github.io/scrollstack/

Go to anchor without changing url

On loading a page I would like it to go to #content without changing the url.
I thought I would be able to use
window.location.hash = "content";
window.location.replace("#content", "");
but #content still exists on the url.
Any better method?
Edit:
Also tried
window.location.hash = "content";
window.location.replace(window.location.toString().replace("#content", ""));
But this sends the browser into a loop.

You could find the vertical position of the anchor with that id, and then scroll to that position.

Go to or Scroll to anchor specified div id without changing url
TRY DEMO
function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({
block: 'start',
behavior: 'smooth'
});
}
#userdiv {
margin-top: 200px;
width: 200px;
height: 400px;
border: 1px solid red;
}
a {
color: #337ab7;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
<a onclick="scrollSmoothTo('userdiv')">
Scroll to userdiv
</a>
<div id="userdiv">
Lorem ipsum this is a random text
</div>

This is a 10 year old question but I came across this issue when using Nextjs and wanted to smoothly navigate to a lower element without effecting the url... Nextjs, Typescript.
const Anchor: React.FC = () => {
const smoothScrollTo = e => {
e.preventDefault();
const element = document.getElementById('search');
element.scrollIntoView({
block: 'start',
behavior: 'smooth' // smooth scroll
})
};
return (
<div>
<a
href=""
onClick={smoothScrollTo}>
Let's go!
</a>
<div id = "search">Take me here!</div>
</div>
)
};
Now, it would probably be a best practice to be using refs here but this did exactly what I needed! I'm sure other improvements can be made too!

This will do it with a nice animation:
Click to scroll
<div id="link" style="margin-top: 1000px; height: 300px; background-color: blue; margin-bottom: 1000px">
Click and scroll to this div without changing url!
</div>
<script>
$('a').on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
if ($(hash).length) {
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 300, function() {
// Do something fun if you want!
});
}
});
</script>
Working JSFiddle