I am using jQuery to hide a div via hide().
Then when a link is clicked it will show the div, but for some reason it will not stay.
it will show for a ms then disappear.
HTML
<div id="introContent">
<h1 id="introText">Welcome</h1>
<p id="introParagraph">I create <strong>Responsive</strong>, <strong>Interactive</strong>, <strong>Beautiful</strong> Mobile ready Websites.
Every Website is created from scratch for each client so no Two Projects are alike.
Please read more about my Company and our work.
"High Quality Work at Affordable Prices"
</p>
</div>
jQuery
$(function() {
$("#introContent").hide();
$("#intro").click(function () { //$(#intro) is a link in my nav bar
$("#introContent").show();
});
});
Stop the browser from doing the default action of the element you are clicking. Cancel the click
$(function() {
$("#introContent").hide();
$("#intro").click(function (evt) {
evt.preventDefault();
$("#introContent").show();
});
});
Related
well i have seen some similar questions but i couldn't find the solution i needed i am trying to make it so that when the user moves from one page to another in the website when the page is loaded the a tag should change color and stay that way i have tried using this code but it didnt work at all here is the html of the code
<div id="button-group" style="width:100%">
<img src="felix.png" id="cat" >
home
Hobbies
Contact
Services
</div>
so for example if i am on the Hobbies page and click the home page the home page should turn the color to blue or if i am on hobbies and its clicked it should also change color onload
here is the jquery that i tried
$(document).ready(function(){
$("#hobbies").trigger('.click');
});
and here is the css when triggered
.a :click {
background-color:rgba(0, 183, 255, 0.788);
}
You can use sessionStorage to store the link that was clicked and get it when the new page is loaded to set a class to the last clicked navigation element.
$(document).ready(function() {
let clicked = $.trim(sessionStorage.getItem("clicked"));
if (clicked) {
$("#button-group a").each(function() {
if ($.trim($(this).attr("href")) == clicked) {
$(this).addClass("clicked");
};
});
}
$("#button-group a").on("click", function() {
$("#button-group a").each(function() {
$(this).removeClass("clicked");
});
let link = $(this).attr("href");
$(this).addClass("clicked");
sessionStorage.setItem("clicked", link);
});
});
As a stack snippet for this doesn't work on Stackoverflow, here's a Fiddle with the adjustment to use preventDefault() on click of a link. Just run the Fiddle again after clicking on a link to see that the last clicked link gets added the class clicked.
What I want is fairly simple, and I have two examples for it:
http://janvanderkleijn.nl/
http://studio-laucke-siebein.com/
When looking at these portfolio websites you see it's scroll based websites mainly relying on images. The interactivity I'm looking for is the clicking on an image, resulting in a 'hovering' element over the web page, further elaborating the project with text, images etc.
What I like about it is that you don't have to leave the home-page to look into a project, and it can be closed by either pressing the close button in the top right, or clicked anywhere outside of this element. Especially in Laucke-Sibein's webpage it's nice, that when you scroll far enough down, the element dissappears.
How hard is it to achieve a similar result? How does this function work? I've been looking all afternoon and failed to find something that helped me further.
As mentioned by others there are many jQuery plugins like lightbox, fancybox, etc. that are capable of outputting images and text. Or a jquery-ui dialog box would work.
Alternatively you could create your portfolio items inside div's and show them on click events.
<body>
<div id="project-list">
html showing images from your projects. <br />
<img src="img1.jpg" data-project="project1" />
<img src="img2.jpg" data-project="project2" />
</div>
<div id="project1" class="project">
html displaying <br />
your project 1
</div>
<div id="project2" class="project">
html displaying <br />
your project 2
</div>
</body>
Then css something like:
.project { position: absolute; top: 100px; left: 100px; display: none; }
#project-list.fixed { position: static; }
Then the using jQuery it would look like:
$(function(){
// add click handler to the images
$('#project-list img').click(function(e){
// if a project is visible then just return and let the
// document click handler handle the closing of the project
if($('.project:visible').length > 0){
return;
}
// get the data project attribute which tells you which project to open
var project = $(this).data('project');
$('#' + project).slideDown('slow');
// add the fixed class to the project list so that it doesn't scroll
$('#project-list').addClass('fixed');
// you must have this to keep the click event from bubbling up
// through the DOM and triggering the document click function
// which would close the project as soon as it opens.
e.stopPropagation();
});
$(document).click(function(){
// this closes the project when anything is clicked that doesn't
// have the event.stopPropagation function set.
$('.project').slideUp('slow');
$('#project-list').removeClass('fixed');
});
$('.project').click(function(e){
// you want this so if they click anything in the project it doesn't
// close the project.
e.stopPropagation();
});
});
See a fiddle here http://jsfiddle.net/wdv79yxw/1/
Sounds like you're looking for a modal window. There are tons of jQuery libraries out there, or even pure CSS solutions. A decent one that I've used is jQuery fancybox, which supports videos, iframes, content, a gallery of images. It's very robust.
Currently I have this script that allows a button to open and close a menu whilst also changing it's class to do a little animation state change depending on open/close,... simple but effective.....
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
within the menu is a list with some options (standard) and when one is clicked it performs the following script based on its tag in the list... here's the html and js for that....
html
<li>
<i class="fa fa-briefcase"></i>Who are Musability?
</li>
JS
$('.fa-briefcase').parent().on('click', function () {
$("#colorscreen").remove();
$( '#menu' ).multilevelpushmenu( 'collapse' );
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBig");
$('.fadeInUpBig').css('background-color', 'rgba(13,135,22,0.1)');
$(".tile-area-main").css({width: "720px"}).load("content.html");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
});
all functions work great separately but when i introduce the functions for the button click fa-briefcase it wont allow me to open the menu again why is this ?
... on another note (therefore probably a new question at another time) this code is repetitive for all buttons and wonder if there is a way of standardizing the stuff that is repeated into one big function ? not sure about how i would go about it but it isn't the focus of this question , although any advice greatly recieved.
What does your content.html file contain?
Because if it contains other JavaScript it could be messing with it.
i.e.
Instead of $(".tile-area-main").load("content.html");
Try $(".tile-area-main").load("content.html#div");
Where #div is the div with the contents you want to load() in
EDIT: Just noticed your comments, seems like you've fixed it yourself, but glad my method worked :)
since the last iOS Update (8+), the Safari "destroys" a jQuery script I use for my mobile navigations.
The mark up is a normal unordered list, generated from Contao.
Now, when I open my page on iOS 8+, the script loads normally, I can open my navigation without a problem, but as soon as I scroll down a bit, it just closes my menu - not even with the toggle slide animation, it just disappears.
My Markup:
<div class="nav-btn"> <!-- burger icon for menu interaction !-->
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="mod_navigation main-menu"> <!-- menu !-->
<ul class="level_1 clearfix"> <!-- main menu list !-->
<!-- list elements and anchors following here !-->
<li>...</li>
</ul>
</div>
My jQuery:
function hideDiv(){
if ($(window).width() > 941) { $(".main-menu .level_1").show(); } else { $(".main-menu .level_1").hide(); }
}
$(document).ready(function(){
hideDiv();
console.log('logging');
$('.header .nav-btn').click(function () {
$('.main-menu .level_1').stop(true,true).slideToggle();
$('.nav-btn').toggleClass( "open" );
});
$(window).resize(function(){
hideDiv();
$('.nav-btn').removeClass("open");
});
});
Does anyone use a similar script and/or can tell me why it's closing my menu?
I also created a JSFiddle. http://jsfiddle.net/940293vw/1/
I read an article about how they changed the scroll event in iOS8, but that didn't go further into the detail about why they should just stop my script when scrolling.
Any help is appreciated!
I encountered this exact issue. What I ended up doing was toggling a class that included display:block; when slidetoggle was complete.
I don't know the reason, but mobile safari wipes out inlnie styles added by jQuery functions when the user scrolls. But it doesn't seem to wipe out classes added by jQuery. Mobile safari works in mysterious ways, and I'm equally curious as to why this is
The code should be something like this:
$("#button").click(function(){
$("nav").slideToggle(function(){
$("nav").toggleClass('iosfix');
});
});
Then in my css -
.iosfix {
display:block;
}
Hope that helps!
I managed to fix it pretty soon after asking this question, forgot to answer it. Anyway. This worked, for anyone encountering the same issue.
/* ios 8+*/
var widthwdw = 0;
$(window).load(function(){
widthwdw = $(window).width();
});
$(window).resize(function(){
if(widthwdw != $(window).width()){
//Do something
widthwdw = $(window).width();
hideDiv();
$('.header .nav-btn').removeClass("open");
}
});
I'm trying to use nicescroll on my website and it's working everywhere except on one page where I have a hidden div. Basically, I have a link that when clicked displays some content that was hidden on the page before. The problem - after clicking the link and showing the content it overflows and is not visible and not scrollable. Nicescroll isn't working for some reason.
Both work on their own on the page - meaning - if I take out the nicescroll code and keep the show/hide div code then I can click on the link and the page will become longer and a regular scroll bar will appear and I can scroll down to the bottom of the content.
Conversely, if I take out the show/hide code (just making the content shown at the load of the page) and leave in the nicescroll code then the page will load as a long page and the nicescroll bar will show up and work just fine.
I just can't get them to work together. I assume it has something to do with the page not needing to be scrollable when it first loads and when nicescroll is originally called so it just says "I don't need to work for this page" and then gives up. So, I've tried copying what looks to me like the "nicescroll startup code"
<script>
$(document).ready(function() {
$("#right").niceScroll();
});
</script>
into the function that is called when the show/hide link is clicked hoping that would "restart" it but that didn't work either.
The show/hide functions looks like this:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
with the actual div section of the page looking like this:
-Show Stuff
<div id="example" class="more">
<p>
"Stuff here"
</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">-Hide Stuff-</a></p>
</div>
Everything is wrapped in a div with id="right" which is why the nicescroll script applies it to #right (which, again, works fine when I don't have the show/hide functionality.)
Any ideas?
I don't know what it is the correct solution but works fine after my div shows up and I call method:
$("#myHiddenDiv").getNiceScroll().onResize();
First off all move the inline onclick to the docready. If nicescroll is attached to the #right container you can try the following:
// cache container:
var $right = $('#right');
// use .on() jquery on container:
$right.on('click', '.showLink', function(e){
e.preventDefault()
$right.find('#example').show();
// resize nicescroll
$right.getNiceScroll().show().resize();
}).on('click', '.hideLink',function(e){
e.preventDefault();
$right.find('#example').hide();
// also hide nicescroll:
$right.getNiceScroll.hide();
});