I have a question regarding this page of mine. The menus and submenus are toggled, and I'm using Isotope. I'd like to know if it's possisble to change the style of the link which just got clicked. Since this is all happening in one page, other solutions for this problem don't work.
I can't get this to work either, probably because I have to use multiple toggles. (+ There is the added complexity of my tv schedule page, since it's basicly an entire page inside a toggle.)
I hope someone can help me by taking a look at my source code.
Create a css class for your active style instead of the inline style you have currently on "TV Schedule" (background: teal; color: white). Call the class "active" for example.
Simply add and remove this class within your click handler you already have setup with jquery. So at 134 in your source:
$('.sort a').click(function(){
//add these 2 lines
$('.sort a').removeClass('active');
$(this).addClass('active');
//the rest of your handler
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
The first line goes through and removes it from all the a tags in that block if it exists. The next one adds it to the one that was clicked.
That's usually the way I do this sort of thing. It's independent of isotope - just using the jquery you already have in there.
Related
I use the target selector to put and remove a class that shows and hides the navigation menu. The problem is that when a user uses the backbutton on the browser the menu states get messed up.
This is my css code
<style>
#buttons-container a.close-menu-primary{display: none;}
#wrap:target #mainmenu{display: block;}
#wrap:target #buttons-container a.open-menu-primary{display: none;}
#wrap:target #buttons-container a.close-menu-primary{display: block;}
</style>
buttons-container is a div with two buttons, open-menu-primary & close-menu-primary, that toggle each other on and off and show or hide the mainmenu.
The problem occurs when someone uses the back button. In that case it only toggles the button states between open and close-menu-primary, which are a burger and a close image.
You can check the live version here if you make the browser small enough or use a mobile device, screen size has to be smaller than (min-width: 768px) and (min-height: 558px) website with toggle by target selector
Hope someone can clear this up if it is possible to use target this way or if there better ways to get this affect without scripting please.
Thanks in advance!
The question is... when user presses the back button, do you want to go back one state of menu visibility (ie. hide it or unhide it), or do you want to go back one page?
I check your linked page http://www.rieon.nl. I think this is the problem:
I presume you want the user to go back one page, not just to hide the menu. Then, you need to change this piece of code
jQuery( document ).ready(function( $ ) {
$("#buttons-container a").click(function(){
$("nav").toggleClass("main");
});
});
and add either return false or e.preventDefault():
jQuery( document ).ready(function( $ ) {
$("#buttons-container a").click(function(e){
$("nav").toggleClass("main");
e.preventDefault(); // use either one
return false; // of these lines
});
});
The problem is that by clicking on the link on navigation button, browser executes the javascript handler that shows the menu AND navigates to link's href address (which is #wrap) and that creates a new step in its history, so that when user hits back button, browser just goes back to previous state (which is usually the same page but without #wrap). By adding return false (that's jQuery speciality) or calling preventDefault() on event object (that's standard JS), you cancel the navigation and leave only your own handler to be executed.
There is probably an answer for this but I have no idea of the terminology I would search for unfortunately!
Basically, there is a button on my Wordpress website at the top right which when clicked, pulls down a form to fill out. What's the easiest way of creating a button further down the page which would open that pulldown and take the user up there, presumably with an anchor? Simple HTML/CSS would be ideal because A: I can create a text box in the page layout creator and just paste the code in there and B: My coding knowledge is quite limited!
The website is www.harringtonsproperty.co.uk. The button in question is the BOOK A VALUATION at the top right.
Thank you!
This cannot be done with CSS alone. You need to use JavaScript.
Currently, the 'click' event is described at the top of the custom.js file. You'll need to add an additional JS function into this file to achieve what you want. For starters/example:
jQuery('button#contactToggle2').click(function(e){
e.preventDefault();
if( jQuery('#contactSlide').css('display') == 'block' ) {
jQuery('#contactSlide').slideUp(500);
} else {
jQuery('#contactSlide').slideDown(500);
// Handle scroll to top
jQuery('html, body').animate({scrollTop : 0},800);
}
})
You'll then need to give your new button an id="contactToggle2" in order for this to work. Again, this is just an example.
So I've been cannibalizing this code from this YUI 3 Drag n' Drop tutorial, and it's been working great.
The one issue that I'm running into is that the example code only copies a few of the CSS styles (individually). This also doesn't include styling of any children elements that may be present.
Y.DD.DDM.on('drag:start', function(e) {
var drag = e.target;
drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
drag.get('dragNode').setStyles({
opacity: '.5',
borderColor: drag.get('node').getStyle('borderColor'),
backgroundColor: drag.get('node').getStyle('backgroundColor')
});
});
So when the drag starts, we create a dragNode and set its HTML based on the item being dragged. After the dragNode HTML is set, we then set the styles using .setStyles() which seems to accept an object.
Is there a more effective way of creating this dragNode so that it not only gets the correct HTML, but also gets all the styles of the element and its children?
I know I could use .one() or .all() to get to the children elements and manually copy over each style that is set, but I feel like there has to be a way of doing that without all the manual style copying.
You could look at using the DOM cloneNode(true) method to clone the whole thing, which should pull over any applied styles too. One warning with this method (and probably the existing copy of HTML) is that IDs will be duplicated. It's probably ok in the case of populating the Drag Node, which you can't interact with much.
Another possibility which I've not investigated beyond a little googling is to use html2canvas to create an image to drag. I've no idea whether that approach will be performant or accurate enough though.
What I ended up finding out was that I was missing a top-level class (which applied the styling to its children elements).
The fix was surprisingly easy in my case, since I had to only add a single class based on if the element had a specific class or not.
Y.DD.DDM.on('drag:start', function(e) {
var drag = e.target;
drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
if( drag.get('node').hasClass('policy') ) {
drag.get('dragNode').addClass('policy');
} else {
drag.get('dragNode').addClass('lead');
}
drag.get('dragNode').setStyles({
opacity: '.5',
borderColor: drag.get('node').getStyle('borderColor'),
backgroundColor: drag.get('node').getStyle('backgroundColor')
});
});
Can anyone explain why the click handler is not invoked consistently in this example?
http://jsfiddle.net/4QBnf/
For instance, if you click in the upper left half of the div, it does not reliably increment the counter.
If I remove the padding-top from this block it works just fine:
.click-check:active {
background-color:blue;
padding-top: 25px;
}
I have tested this in a number of different browsers and it behaves the same way.
I found two possible issues with your code. You can view the fixes here:
http://jsfiddle.net/4QBnf/6/
CSS Box Model vs jQuery Box Model
Whenever you click on the top half of your box, you aren't technically clicking on .click-check, you are actually clicking on .count. This image shows the location of .count relative to .click-check:
jQuery counts this as a click on .click-check, but CSS doesn't. The number increments, but the CSS "active" effect isn't applied.
You can resolve this by removing the .count div and placing everything inside of .click-check.
jQuery Counter
The second issue is with your jQuery code. The code currrently reads:
$('.click-check').click(function() { $('.count').html(count++); });
count isn't increased until after this line is done. This means that the first click appears to have no effect.
This line will increment count, then display it to the user:
$('.click-check').click(function() { $('.click-check').html(++count); });
I've applied both updates to your example here:
http://jsfiddle.net/4QBnf/6/
Update
An alternate way to resolve the issue is to do everything through jQuery. This synchronizes all of the appearance and logic into a single box-model interpretation.
var count=0;
$('.click-check').mousedown(function() {
$('.click-check').addClass("active");
$('.click-check').html(++count);
setTimeout(function(){
$('.click-check').removeClass("active");
}, 50);
});
http://jsfiddle.net/4QBnf/15/
I know how to toggle an entire div, however I only want to hide all but the top 10% or top 100px, for example. And then when the div is clicked, the entire div opens.
I thought I saw this a while ago, but can't remember where.
Thanks.
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
Your code should be something in the lines of:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').animate({height: '20px'});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').animate({height: '100%'});
return false;
});
});
Take a look the image on my home page, is this kind of what you want to do?
http://www.carsonshold.com/
I have it jet out when you hover over it, but that can easily be changed to a click. It somewhat complicated to do, and still isn't perfect in IE (the page loads and the clip isn't recognized until you hover over it).
It may be slightly different from what you want since I did this on an image rather than a div, so I needed to animate the clipping mask. The function I used is as follows:
var featureDuration = 300; //time in miliseconds
$('#featured-img').hover(function() {
$(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});
}, function() {
$(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
});
If you want to animate the clip, you will need to insert this JS as well because it doesn't behave properly otherwise. http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/
Take a look at the CSS in my code if you are unsure how I did the rest of it, or comment on here if you have any questions.
Cheers
Did this rather quickly, note it will only hide the bottom portion.
http://jsfiddle.net/loktar/KEjeP/
Simple toggle that changes the height, hiding the rest of the content within. Easy enough to animate as well, just modify the toggle functions to adjust the heights rather than adding a class.