I have a div with an un-ordered navigation list in it. The div it is in has a set height and the overflow set to auto to give me a scroll bar. What I want is to have the "current" navigation link scrolled to the top of the div on page load. Each list items has the class 'current-menu-item' when current. Here is what the code looks like.
<div class="menu-portfolio-container">
<ul id="menu-portfolio" class="menu">
<li id="menu-item-174" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-174 has-image">
<a href="http://dnb.khcreativemedia.com/hinton/">
</li>
Here is the jQuery I tried.
<script>
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('.current-menu-item').offset().top
}, 'slow');
});
</script>
Here's the link to jQuery in the head:
<script src="http://dnb.khcreativemedia.com/wp-includes/js/jquery/jquery.js?ver=1.11.1" type="text/javascript">
Can anyone tell me what I would need to do to get this working? This is a wordpress site using the genesis framework.
Thanks to Tim's help, I've got it working. You can check the js fiddle page to see it in action. jsfiddle.net/KHCreative/2rn7otax
Thanks again for your help Tim.
Related
I'm working in kendo UI & I'm facing an issue while I give an ng-click option on the HTML content which was loaded later.
Here I'm adding a few codes related to what I have did:
HTML:
<div ng-controller="KendoCtrl">
<div class="show_html_here"><!-- Ajax inserts HTML here --></div>
</div>
HTML & ng-click in RED box & which is working:
<div ng-model="open_Filter" ng-click="onClick('open_Filter')">
<span>Total Open</span>
<span>0</span>
</div>
HTML & ng-click in ajax HTML & which is not working:
<ul>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 1</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 2</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 3</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 4</li>
</ul>
While clicking in any of the li which has ng-click, the alert is not working.
I have also tried by adding the ajax HTML section directly to my view page without the ajax and at that point, the click was working fine.
Ajax:
$('body').on('change', '#dropdown_id', function(){
$.post('controller/htmlsection', {'id': $this.val()}, function(data) {
$('.show_html_here').html(data.html);
});
});
Kendo/Angular Codes:
angular.module("KendoApp", ["kendo.directives"]).controller("KendoCtrl", function ($scope, $http) {
...
$scope.onClick = function(param) {
alert(param); // Not working while we click in a section which is loaded in ajax(eg.: PRT-4)
}
...
});
alert(param); inside $scope.onClick not working while we click in a section which is loaded in ajax(eg.: PRT-4) to div with class show_html_here. I think that it is because of the reason that the ajax section is loaded later the Kendo/Angular code is initiated.
If you know some solution for this please help me.
I do not get a solution from Stack & need to find a way to solve my issue. I found a solution for the issue, do not know whether its a proper way or not, but it solved my issue.
Update in HTML:
<ul>
<li class="customFilter" ng-model="stageFilter">PRT - 1</li>
<li class="customFilter" ng-model="stageFilter">PRT - 2</li>
<li class="customFilter" ng-model="stageFilter">PRT - 3</li>
<li class="customFilter" ng-model="stageFilter">PRT - 4</li>
</ul>
Kendo/Angular Codes:
// Custom Click
$('body').off('click', '.customFilter').on('click', '.customFilter', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
active = 0;
} else {
$(this).addClass('active');
active = 1;
}
$scope.onClick('stageFilter', active); // Click was working as required
});
The custom click was working properly as I required because of the reason that the click was happening only after the HTML from ajax is loaded.
I do not say that this solution is a proper way, but it's my issue for this time.
Open to new or a proper solution
I would like to know how to modify the example grouped listview that comes with kendo mobile.
The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?
I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.
//The Template
<script type="text/x-kendo-tmpl" id="template">
<div class="myclass">
#:name#
</div>
</script>
//The data binding
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
Thanks
After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design.
Thanks Whizkid747 for your help.
//Updated Template (removed <div>)
<script type="text/x-kendo-tmpl" id="template">
#:name#
</script>
I'm using the jQuery plugin Masonry and I'm having an issue that happens when I make an ajax call to another page to load in images for a gallery. The ajax call works and the images load in but when the call is made, something happens that removes one of the classes that Masonry appends too one of my divs.
Here is how my html looks on the first page. Everything is fine here and shows the class masonry-brick, which I need to render out the appropriate css to make everything look nice and it also renders out the inline css.
<a href="/system/images/series_uploads/15/original/berkshire_25585_walnut_famousdaves03.jpg?1330115640" rel="lightbox['gallery']">
**<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">**<img alt="" src="/system/images/series_uploads/15/gallery/berkshire_25585_walnut_famousdaves03.jpg?1330115640" title="Berkshire" />
<div class="gallery-text">
<h3>Berkshire</h3>
<p>HDP – High Definition Porcelain</p>
</div>
</div>
</a>
When I click on the link to make the ajax call, the images load in fine and it works on all the links but the class masonry-brick is removed and the images lose their css.
jQuery("#project-galleries-navigation li.load-category a").on("click", function(){
var href = jQuery(this).attr("href");
jQuery("#gallery").fadeOut(300).remove("img").load(href).fadeIn(2300);
return false;
});
This is the code i'm using for masonry.
var $container = jQuery('#copy-wrapper-gallery');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
isAnimated: true
});
});
This is what ends up happening to my html when the page loads in the new data. The class masonry-brick is no longer present and the inline css disappears as well.
<a href="/system/images/series_uploads/7/original/ashton_23931_smokey_beige_.jpg?1330114250" rel="lightbox['gallery']">
**<div class="item">**<img alt="" src="/system/images/series_uploads/7/gallery/ashton_23931_smokey_beige_.jpg?1330114250" title="Ashton" />
<div class="gallery-text">
<h3>Ashton</h3>
<p>Porcelain</p>
</div>
</div>
</a>
Has anyone had this problem or knows a way to fix this issue?
I was able to get it to work by modifying this jquery and putting in a callback function for it.
jQuery("#gallery").fadeOut(300).remove("img").load(href, function(){
jQuery("#gallery").masonry("reload");
}).fadeIn(2300);
e.preventDefault();
});
For example, if I have a ready instance of CKEDITOR, and on that same page I have a list of pictures, with this markup:
<div class="galleryPictures">
<a href="#image-id-1" data-id="1" data-img-src="/pictures/image-1.jpg" class="galleryPicture">
<img src="/pictures/image-1.jpg" />
</a>
<a href="#image-id-2" data-id="2" data-img-src="/pictures/image-2.jpg" class="galleryPicture">
<img src="/pictures/image-2.jpg" />
</a>
<a href="#image-id-3" data-id="3" data-img-src="/pictures/image-3.jpg" class="galleryPicture">
<img src="/pictures/image-3.jpg" />
</a>
</div>
And I have following jQuery click handler delegated to these a.galleryPicture items:
$(document).ready(function() {
$('.galleryPictures').on('click', 'a.galleryPicture', function() {
// when this accours I would like to open CKEditor's
// Insert-Image Component, and to get the "url" field filled with
// $(this).data('img-src'); value
});
});
Is it possible to trigger / open Insert-Image programmatically?
Found it. Might be of help to someone else:
With a simple inspection with Firebug I've seen that the <a> which on click triggers the opening of the Insert-Image component contains this function call in it's onclick attribute:
CKEDITOR.tools.callFunction(51,{});
// second argument is {} (an empty js-object), it the original the <a> onclick it was like this:
// CKEDITOR.tools.callFunction(51, this); meaning it was sending the instance of that element
After this call it is possible to do something like this:
CKEDITOR.tools.callFunction(51,{});
// a failsafe if jQuery doesn't find the specified element after the function is executed
setTimeout(function() {
$('#cke_69_textInput').val('someImageUrl');
}, 50);
So I've got an image that inside a tag, and I've also got a div that is centred in the middle of the screen.
How do I make this div invisible until the image is clicked?
Preview of page when the div is visible:
So that added to cart is a div in the middle of the screen. I want that to only show up when the "Add to cart" button has been clicked.
I want the div to go away again after 2 seconds. Transitions would be nice (eg fade into visibility), but I don't mind.
Set the display of the div to none and do a onclick event for the image which sets the display of the div to block. I would recommend using JQuery to add in any transitions or animations.
Something like (without animations):
<div id="cart" style="display:none">
</div>
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/>
Worked it out. Had to use jQuery.
In the < head> :
<script>
$(document).ready(function(){
$(".addtocart").click(function(){
$(".addedcartbg").fadeIn(500);
$(".addedcartbg").delay(1000);
$(".addedcartbg").fadeOut(500);
});
});
</script>
In the < body> :
<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div>
css
.hide{
display:none;
}
html
<div class="hide">
// put content here
</div>
<img class="hide-show" src="site.com/image.png" alt=""/>
js
$(function(){
$('.hide-show').bind('click',function(){
$('.hide').fadeIn(500).delay(2000).fadeOut(500);
});
});