-
Is it possible to invert an image using JS
The real issue is if it's possible to do this using a fade The image is black and I want to fade to white. The image can be an SVG
-
OnClick, Append function with jquery
want something like this - OnClick='window.open('$issuelink')' to append to the dom inside a div called issue_image when #close is clicked. Is this possible? I can't find out how to append information into divs, only inside the tag, if that makes sense . I've added code below to show what I want the final div to look like after the close button is clicked Thank you <div class="issue_image" OnClick='window.open('$issuelink')'></div>
-
Ajax loader on scroll
I'm using the following code to load in new wordpress posts on click of a category or "Show more" This is working fine, but I want to replace the 'bloc-load' click action with it automatically loading when scrolling to the bottom of the page. var page = 1; var loading = true; var root="http://www.example.com/"; var cat = "home"; $("body").delegate("#bloc-load","click", function() { console.log("loading more..."); loading = true; page++; load_posts(16,page,cat); }); $("body").delegate("#bloc-menu a","click", function () { cat = $(this).text().toLowerCase(); var url = document.URL; if(window.location.hash) { url = url.substr(0,url.indexOf("#")); } console.log(url); if(url!=root){ window.location=root+"#"+cat; } else { window.location.hash=cat; console.log("loading "+cat+"..."); loading = true; page=1; load_posts(16,page,cat); } return false; }); function load_posts(n,p,c){ console.log("loading posts - "+n+", "+p+", "+c); var $window = $(window); var $content = $("body.blog #home-arts"); if(n==16){ console.log("reset content..."); } $.ajax({ type : "GET", data : {numPosts : n, pageNumber: p, cat: c}, dataType : "html", url : "http://www.example.com/wp-content/themes/example/ajaxlooper.php", beforeSend : function(){ if(page != 1){ $content.append('<div id="bloc-loader">Loading...</div>'); } }, success : function(data){ $data = $(data); //console.log($data); if($data.length){ console.log("appending..."); $data.hide(); if(page == 1){ $content.html(""); } $content.append($data); $data.fadeIn(500, function(){ $("#bloc-loader").remove(); loading = false; }); } else { $("#bloc-loader").remove(); } }, error : function(jqXHR, textStatus, errorThrown) { $("#bloc-loader").remove(); alert(jqXHR + " :: " + textStatus + " :: " + errorThrown); } }); } $(function () { if(document.URL!=root) { cat=window.location.hash; } console.log("loading..."); load_posts(16,page,cat); }); I did think this would work: $window.scroll(function() { var content_offset = $content.offset(); console.log(content_offset.top); if(!loading && ($window.scrollTop() + $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) { console.log("loading more..."); loading = true; page++; load_posts(16,page,cat); } }); But nope....Any ideas?
-
Scroll Div to the center of the browser window
I'm afraid it would take too long for me to mock up a jsfiddle... Basically, Onclick the div shows...On scroll the div centers...I would like this to be one action rather than the user clicking and then having to scroll up or down a pixel to view the div. I think you'll see what I mean if you go here scroll down and then click on an image...then scroll
-
Scroll Div to the center of the browser window
I'm currently using this code to keep a container in the center of the browser window when the user scrolls. My issue is that the user needs to scroll to instigate this. So is the anyway of this happening onclick (Currently the users clicks, then wont see the container until they scroll) $(window).scroll(function() { $('#content').stop().animate({ "marginTop": ($(window).scrollTop() - 30) + "px" }, 400); });
-
Wordpress Category.php help
So I have a menu which shows a list of sub categories under a particular category. When clicking on one of these subcategories you're taken to wordpress.com/parentcat/subcat And i'm using category.php for the template of this generated page. The issue is, no matter what sub category I click on the page does not show posts under the selected category. Am I right in believing this should be the case? I believed that any category I select would then loop post content of the selected category? (Show all posts in that category) I could of course do this manually and create a new template for each category, but that seems crazy as there would be dozens, and also not content managed. I've looked through the wordpress codex but it doesn't seem clear. <?php get_header(); ?> <div id="primary" class="site-content"> <div id="content"> <?php if ( have_posts() ) : ?> <header class="archive-header"> <h1 class="archive-title"><?php single_cat_title( $prefix = '', $display = true ); ?></h1> <?php if ( category_description() ) : // Show an optional category description ?> <div class="archive-meta"><?php echo category_description(); ?></div> <?php endif; ?> </header><!-- .archive-header --> <?php /* Start the Loop */ while ( have_posts() ) : the_post(); ?> <?php the_title();?><br /> <?php endwhile;?> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?> My Menu: <?php wp_list_categories('use_desc_for_title=1&orderby=id&title_li=&show_count=1&use_desc_for_title=0&child_of=9'); ?>
-
Border radius issue in safari
I've added a border radius and shadow to a nivo slider, which appears fine in most browsers apart from safari where the image is overlapping the rounded border. Any ideas as to why this is happening? Seems fine on load and then the second slide loads in and the corners go weird. http://dev.lecollective.co.uk/clients/2013/inspire/
-
.htaccess file not working
Worth reading this - http://css-tricks.com/snippets/htaccess/force-files-to-download-not-open-in-browser/
-
.htaccess file not working
To force file downloads via .htaccess you must be running on apache.
-
Add Javascript cookie to function
I have this javascript animation on the homepage, but I want the user to only see it once and then not to see it again for another hour. Is this possible? <script type="text/javascript"> if (screen.width > 640) { var s = document.createElement("script"); s.type = "text/javascript"; s.src = "<?php echo get_template_directory_uri(); ?>/js/identica.ani.js"; $("head").append(s); } </script>
-
Make this slideshow responsive?
Can anyone think of way of updating this slideshow to be responsive? .scrollable .items currently needs a fixed width to function jsfiddle.net/lecollective/RkGTR/
- Adding Prev, Next links to existing JS slideshow
-
-
Adding Prev, Next links to existing JS slideshow
I'm trying to replace the numbered navigation of this slide show with a simple < & > This works perfectly for a build i'm currently working on and i've already heavily integrated it into the site so would rather not have to switch it out. This is the it - http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html My last hope before going back and ripping though my work :/
- Ajax homepage content
-
Ajax homepage content
So I have a custom menu which is currently displaying a list of categories, And I have a loop on the homepage calling in posts from these categories...Something like this: <?php global $post; $args = array( 'category' => '4,5,8,12', 'posts_per_page' => 8, 'orderby' => 'date', 'order' => 'DESC'); $myposts = get_posts( $args ); $count = 1; $categories = get_categories($args); foreach( $myposts as $post) : setup_postdata($post); ?> What I want is when I click on one of these menu items I would like the posts of the category selected to be pulled into this space without loading a new page. Has anyone done this before?