jQuery anchor links toggling a menu? - javascript

I used jQuery to make a toggle menu where someone can click on different span titles to toggle between different containers of content (on the website, this toggle menu toggles between different contact forms). The menu works, but I am trying to make it so that if a user clicks an anchor link on a different page, they will be sent to this page and the menu will automatically toggle to the corresponding container of content.
For example, if someone were to click on an anchor link like "mydomain.com/test-page/#third", I would want the content from the third menu item to toggle and show automatically when the page loads. I have been playing around with using "window.location.hash" to trigger a click event like this, but can't figure it out.
Is there a way to trigger a click event when the page url has a certain anchor hash like this at the end of it?
Would really appreciate any help folks can offer!
Here is the fiddle: https://jsfiddle.net/ecv5jwsr/
$(function() {
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle(ix === 0);
$('#second').toggle(ix === 1);
$('#third').toggle(ix === 2);
$('#four').toggle(ix === 3);
$("a[href='" + window.location.hash + "']").parent("#test").click();
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container text-center">
<!-- the toggler -->
<div class="row">
<div class="col-12">
<p id="toggle">
<span>TITLE 1</span>
<span>TITLE 2</span>
<span>TITLE 3</span>
<span>TITLE 4</span>
</p>
</div>
</div>
</div>
<!--container -->
<div class="container p-5 contact-page-forms">
<div class="row pl-md-5 pr-md-5">
<div class="col-12 pt-4">
<div id="left">
<h3>Content 1</h3>
</div>
<div id="second">
<h3>Content 2</h3>
</div>
<div id="third">
<h3>Content 3</h3>
</div>
<div id="four">
<h3>Content 4</h3>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

To do this you need to set tab id and save it in url as parameter like this:
$(function () {
let url = new URL(window.location);
let tab = (url.searchParams.get("tab") == null ? 'left' : url.searchParams.get("tab"));
url.searchParams.set('tab', tab);
history.pushState({}, null, url);
$(`.col-12.pt-4 div`).addClass('hide');
$(`.col-12.pt-4 #${tab}`).removeClass('hide');
$('#toggle > span').click(function () {
let tab = $(this).attr('for');
$(`.col-12.pt-4 div`).addClass('hide');
$(`.col-12.pt-4 #${tab}`).removeClass('hide');
let href = $(this).find('a').attr('href');
let url = new URL((href == '#' || href == '' ? window.location : href));
url.searchParams.set('tab', tab);
history.pushState({}, null, url);
//window.location.href = url;
});
});
.col-12.pt-4 .hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center">
<!-- the toggler -->
<div class="row">
<div class="col-12">
<p id="toggle">
<span for="left">TITLE 1</span>
<span for="second">TITLE 2</span>
<span for="third">TITLE 3</span>
<span for="four">TITLE 4</span>
</p>
</div>
</div>
</div>
<!--container -->
<div class="container p-5 contact-page-forms">
<div class="row pl-md-5 pr-md-5">
<div class="col-12 pt-4">
<div id="left" class="hide">
<h3>Content 1</h3>
</div>
<div id="second" class="hide">
<h3>Content 2</h3>
</div>
<div id="third" class="hide">
<h3>Content 3</h3>
</div>
<div id="four" class="hide">
<h3>Content 4</h3>
</div>
</div>
</div>
</div>

Related

Drag and drop ranking function in Laravel form

I am making a survey form and I was to have the user drag and drop for a ranking system. I have the attached code but the tiles don't move when I try to drag the across. Is there any way to fix this or an alternative? When I try to drag an item over, it instead highlights the text.
survey.blade.php
<script>
$(function(){
item_height=$(".item").outerHeight(true);
height=(item_height+2)*($(".item").length+1);
$(".source-container,.destination-container").height(height);
$(".source .item").draggable({
revert:"invalid",
start:function(){
$(this).data("index",$(this).parent().index());
}
});
$(".destination").droppable({
drop:function(evern,ui){
if($(this).has(".item").length){
if(ui.draggable.parent().hasClass("source")){
index=ui.draggable.data("index");
ui.draggable.css({left:"0",top:"0"}).appendTo($(".source").eq(index));
}
else{
ui.draggable.css({left:"0",top:"0"}).appendTo($(this));
index=ui.draggable.data("index");
$(this).find(".item").eq(0).appendTo($(".destination").eq(index))
}
}
else{
ui.draggable.css({left:"1px",top:"1px"});
ui.draggable.appendTo($(this));
$(".destination").removeClass("ui-droppable-active");
}
}
});
$(".source").droppable({
accept: function(draggable) {
return $(this).find("*").length == 0;
},
drop:function(event,ui){
ui.draggable.css({left:"0",top:"0"}).appendTo($(this))
}
})
})
</script>
<h3>Drag and drop items on right for ranking</h3>
<div class='container'>
<div class="source-container">
<div class='source'>
<div class='item'>
<p>Item 1</p>
</div>
</div>
<div class='source'>
<div class='item'>
<p>Item 2</p>
</div>
</div>
<div class='source'>
<div class='item'>
<p>Item 3</p>
</div>
</div>
</div>
</div>
<div class='move-back'>
</div>
<div class='destination-container'>
<div class="destination" id="dest1">
<span>1</span>
</div>
<div class="destination" id="dest2">
<span>2</span>
</div>
<div class="destination" id="dest3">
<span>3</span>
</div>
</div>
For reference, I added 3 items to rank but I would like to add more.

How to go to specific section using jQuery?

This is my site: http://2helix.com.au/v-04/ It's simple, built with HTML.
Now you can right side navbar. When you click on any link it will show you content. By default all content is hidden.
Now I want to point that section when I click on the link. For example: If I click on social link it's should go to social content section.
I know, If I use this It's should work:
<li><a class="showSingle social" target="1" href="social">SOCIAL</a></li>
<div id="social"></div>
If I do this then page is open on new window.
How can I smoothly go to that section without new window?
Thanks.
Here is my code:
<ul class="nav">
<li>SOCIAL</li>
<li><a class="showSingle" target="2">DIGITAL</a></li>
<li><a class="showSingle" target="3">DESIGN</a></li>
<li><a class="showSingle" target="4">DEVELOPMENT</a></li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<div id="div1 mySocial" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</strong></p>
</div>
</div>
</div>
</div>
</div>
// jQuery code...
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
});
You've a huge number of problems with your basic HTML code that you need to fix before you even look at adding jQuery
You cannot give an element 2 ids. <div id="div1 mySocial" class="targetDiv socialContent"> is not valid. You will need to create a separate element for your anchor e.g. <a id="mySocial"></a>
To link to an anchor you need to use # in the href, e.g. <a href="#mySocial" class="social" >
You cannot use target like that. There are specific values that are allowed and numbers are not any of them. Instead you could use the data-target
Now to what you are trying to do with jQuery...
You are hiding all content except for the one you click on, so there is no scrolling required... see the working example below. What exactly are you trying to achieve?
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).data('target')).show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>SOCIAL</li>
<li>DIGITAL</li>
<li>DESIGN</li>
<li>DEVELOPMENT</li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<a id="mySocial"></a>
<div id="div1" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<a id="digital"></a>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<a id="design"></a>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<a id="development"></a>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</p>
</div>
</div>
</div>
</div>
</div>
Try to change your jquery code like This:
$(document).ready(function() {
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
$('html, body').animate({
scrollTop: $('#div' + $(this).attr('target')).offset().top
}, 500);
return false;
});
});
});
Add also this code on click.
jQuery('html').animate({
scrollTop: jQuery(".content").offset().top
});
If you replace
target = "1"
with
data-target = "#social"
then the link will jump down to a div with the id = "social"
<li><a class="showSingle social" data-target="social" href="social">SOCIAL</a></li>
<div id="social"></div>

Expand / Show and hide div element in a listview

As you can see, is this a list view and my mission is when you click on an element / div then the div with the images expand / show. Now that is easy, even for a backend developer, but I would like to:
1. when I click again on the same element, then the element will hide.
2. When I click on another element, then the element that is already expand will hide and the other element that I click on, will expand / show.
I need Script and CSS for this please.
<div class="row">
#foreach(var post in CurrentPage.Children)
{
<div class="col-md-12">
<div class="content equal" onclick="showhide()">
<a href="#post.Url">
<div class="date">#post.CreateDate.ToLongDateString()</div>
<h2>#post.Name</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images(-expand)">
<img src="#post.Image" />
</div>
</div>
}
</div>
Try as follows.
$('.content.equal').click(function() {
$('.content.equal').not(this).next().slideUp();
$(this).next().slideToggle();
});
$('.content.equal a').click(function(event) {
event.preventDefault();
});
.images {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>

How to change font color of a selected div

just need some help on how to change the font color of the title for the current div being selected.
See my code below:
HTML
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="photography" class="photography">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="photography-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="graphics" class="graphics">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="graphics-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
JS
$("#hideshow1").click(function(){
$("#photography").slideToggle("slow");
$("#graphics").slideUp("slow");
});
$("#hideshow2").click(function(){
$("#graphics").slideToggle("slow");
$("#photography").slideUp("slow");
});
What I'm trying to do is when I click Photography, it will change the font color and when I click Graphics, the photography color would go back to black and graphics would now be the colored font.
function chgfont(type){
// document.write("<input type=\"button\" id=\"hideshow2\" name=\"hideshow2\" value=\"red\" class=\"btn\" onclick=\"chgfont('B');\"><input type=\"button\" id=\"hideshow1\" name=\"hideshow1\" value=\"blue\" class=\"btn\" onclick=\"chgfont('A');\"> ");
if(type=="A"){
document.getElementById("colorA").style.color ="blue";
// document.write("<font color=\"blue\">Font colors is blue</font>");
}else{
document.getElementById("colorA").style.color ="red";
// document.write("<font color=\"red\">Font colors is red</font>");
}
}
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<input type="button" id="hideshow1" name="hideshow1" value="blue" class="btn" onclick="chgfont('A');">
<input type="button" id="hideshow2" name="hideshow2" value="red" class="btn" onclick="chgfont('B');">
<hr class="small">
<div id="colorA">
Colored By Santa
</div>
</div>
</div>
</div>
</div>
I hope i can help you.
I would suggest a little different formation of your function. Select the .btn elements and, depending on the clicked element, get the id and perform your actions.
As for the font color, write up a css rule giving the desired color and simply add, or remove this class form the respective elements:
jQuery
$('.btn').on('click', function() {
var that = $(this);
var id = that.attr('id');
//Remove .colored class form all .btn elements
$('.btn').removeClass('colored');
//Add .colored class to the clicked element
that.addClass('colored');
var ph = $("#photography");
var gr = $("#graphics");
//Permorm the appropriate action depending on the clicked id
if (id == '#hideshow1') {
ph.slideToggle("slow");
gr.slideUp("slow");
} else if (id == '#hideshow2') {
gr.slideToggle("slow");
ph.slideUp("slow");
}
});
CSS
.colored { color:red }

Using the correct Jquery selectors to migrate content between divs

Majorly stuck here and would love some help. I am trying migrate the hidden div content of a particular topic to a separate area when it's specific title is clicked. At the minute I can get the content to migrate but instead of the specific topic content it just cycles through the content upon clicking.
Sorry for my poor Title, I'm struggling to define my exact problem. Please change if you feel you can do better.
http://jsfiddle.net/vBCs5/1/
Clicking the grey subtitles migrates the content.
Thank you in advance.
Jquery:
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$(".test").click(function () {
$(".freemarker").each(function () {
var working = $(this).contents();
var ref = $(".content-box").contents();
$(this).append(ref);
$(".content-box").append(working);
});
});
});
HTML
<html>
<body>
<div class="page-wrap">
<div class="left-column-wrap">
<h1>FreeMarker +</h1>
<div class="freemarker-wrap">
<span class="test">
<h2>Lucene Call ></h2>
<div class="freemarker">
<p>Click to hide stories</p>
</div>
</span>
<span class="test">
<h2>Arrays ></h2>
<div class="freemarker">
<p>Arrays</p>
</div>
</span>
<span class="test">
<h2>Declaring and outputting variables ></h2>
<div class="freemarker">
<p>Declaring</p>
</div>
</span>
<span class="test">
<h2>IF Statements ></h2>
<div class="freemarker">
<p>Statements</p>
</div>
</span>
<span class="test">
<h2>Fragments ></h2>
<div class="freemarker">
<p>Fragments</p>
</div>
</span>
<span class="test">
<h2>Working with Numbers ></h2>
<div class="freemarker">
<h3>Numbers</h3>
</div>
</span>
<span class="test">
<h2>Current Date ></h2>
<div class="freemarker">
<p>Current</p>
</div>
</span>
</div>
<div class="javascript-wrap">
<h1>JavaScript +</h1>
</div>
<div class="javascript-wrap">
<h1>JQuery +</h1>
</div>
<div class="javascript-wrap">
<h1>HTML +</h1>
</div>
<div class="javascript-wrap">
<h1>CSS +</h1>
</div>
</div>
<div class="content-box">
</div>
</div>
</body>
</html>
assuming this is what your are asking for...
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$(".test").click(function () {
var working=$(this).find(".freemarker").html(); // get that particular <span> html
$(".content-box").html(working); <migrate it to content
});
});
fiddle here
I think you're over complicating it ;)
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$("span.test").click(function () {
$(".content-box").html( $(this).find("div.freemarker").html() );
});
});

Categories