I have five links that I want to change the content in the same separate DIV. There's different content corresponding to each link. On the mouseleave, I need the default text to return inside the separate DIV.
Has anyone already done this or can guide me? I prefer jquery.
Thanks!
$("a.link").mouseleave(function() {
$("#sepdiv").text($(this).text());
});
//share the same class ("link" as an example) with all your links. and have an id for the separate div
You question isn't clear and I don't have any code that I can base this on but I hope this is what you where looking for. let me know so I can edit my answer!
Edit:
After looking at the website shared in the comment:
js
$(document).ready(function() {
//this is your code - just add it all under one document load
$.preloadCssImages();
$('#slider').nivoSlider();
$('a.share-links').hover(function() {
$('#ms').text($(this).text());
}, function() {
$('#ms').text(function() {
return $(this).attr("title");
});
});
});
css
.share-links
{
text-indent:-9999px;
}
html
<div id="ms" title="Our crusade to feed every orphan in the world.">
Our crusade to feed every orphan in the world.
</div>
<div id="nc_wrap2">
<a class="nc1 share-links" href="#">Facebook</a>
<a class="nc2 share-links" href="#">Twitter</a>
<a class="nc3 share-links" href="#">..</a>
<a class="nc4 share-links" href="#">..</a>
<a class="nc5 share-links" href="#">..</a>
</div>
I hope this is better!
Related
All:
I am pretty new to Angular UI-Router, when I come to ui-view, there is one attribute called "autoscroll" confused me so much, I thought it controll if the view page scroll(is my understanding correct, if not, please help with what this autoscroll does), but when I use it like:
<body ng-controller="main">
<div class="header">
<span>
<a ui-sref="home">HOME</a>
</span>
<span>
<a ui-sref="signup">SIGNUP</a>
</span>
</div>
<div class="body" ui-view autoscroll=false statename={{scroll}}></div>
</body>
And
app
.controller("main", function($scope){
$scope.scroll = true;
})
.config(function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise("/home");
$stateProvider
.state("signup", {
url: "/signup",
template: "<div class='signup'><span>This is a signup page. </span><p>And a long paragraph is follow</span></div>"
})
.state("home", {
url: "/home",
template: "<div class='home'><span>This is a home page. </span><span>And a long paragraph is follow</span></div>"
})
})
I have tried
autoscroll=false
autoscroll=true
autoscroll="false"
autoscroll="true"
//I set $scope.scroll to true and false
autoscroll={{scroll}}
autoscroll=scroll
autoscroll="scroll"
None of these works: when I scroll current view down and switch to another view, it always automatically scroll to Top, what I want is keep the view to current scroll position, any idea?
Thanks for help.
Magento ver. 1.13
I'm trying to edit the code and layout of an existing Magento website.
From asking a question yesterday i had learned that when first landing on the website you are directed to the page tagged with the "home" URL key and you can find the pages by looking in the "CMS->Pages->Manage Content"
I then looked at what the page with the URL key "home" contains..
<div>{{block type="dip/dip" name="dip" template="dip/banner-home.phtml" }}</div>
<div class="content-home">
<div class="tab-text">{{block type="core/template" name="tabs_home" as="tabs_home" template="page/tabs.phtml"}}</div>
</div>
so i looked at the first line and decided that it was loading the banner that is at the top of the website.
I then looked at the third line that is loading a block from the template aswell and it appears to be loading the file tabs.phtml..
I then located the tabs.phtml hoping that the entire layout of the page would be located there, but i didn't find anything that seems of any use in there.
this is what the page contained..
<SCRIPT type="text/javascript" src="<?php echo $this->getSkinUrl('js/carousel.js') ;?>"></SCRIPT>
<div class="tabs">
<ul class="veiw-all-tab" id="navigation-links">
<li><a href="javascript:void(0);" class="slide-arrow-lft" ><img src="<?php echo $this->getSkinUrl()?>images/slide-left.gif" alt="" /></a></li>
<li>
<span id="newallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/view-all-products.gif" alt="" /></span>
<span id="featuredallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/View-All-Featured-Products.gif" alt="" /></span>
</li>
<li><a href="javascript:void(0);" class="slide-arrow-rgt" ><img src="<?php echo $this->getSkinUrl()?>images/slide-right.gif" alt="" /></a></li>
</ul>
<div class="product-details-new-tab-content">
<ul class="product-details-new-tabs-horiz">
<li id="product_new_products" class="selected"><span><?php echo $this->__('New Products'); ?></span></li>
<li id="product_feature_products"><a href="javascript:void(0)" ><span><?php echo $this->__('Featured Products'); ?></span></a></li>
</ul>
</div>
</div>
<?php echo Mage::getBlockSingleton('catalog/product_new')->setTemplate('catalog/product/new.phtml')->toHtml(); ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('featured_block')->toHtml(); ?>
<script type="text/javascript">
var show_selector = new Array();
show_selector[0] = true
show_selector[1] = true;
//show_selector[2] = true;
function showNewProductGallery(counter){
selector = ".infiniteCarousel"+counter;
if(show_selector[counter])
{
jQuery(selector+" .jCarouselLite").jCarouselLite({
btnNext: "#navigation-links .slide-arrow-rgt",
btnPrev: "#navigation-links .slide-arrow-lft",
speed: 500,
easing: "easeinout"
});
show_selector[counter] = false;
}
};
</script>
<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('selected')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
var counter = 0;
ul.getElementsBySelector('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('selected');
// Added by Zeon
if (el.id == 'product_new_products') {
$('newallproductspan').show();
$('featuredallproductspan').hide();
}
if (el.id == 'product_feature_products') {
$('featuredallproductspan').show();
$('newallproductspan').hide();
}
// End
contents.show();
showNewProductGallery(counter);
} else {
el.removeClassName('selected');
contents.hide();
}
counter++
});
}
}
new Varien.Tabs('.product-details-new-tabs-horiz');
</script>
I'm starting to run out of leads to follow to find out how to actually change anything about this page at all.. i can't seem to find anything.. I'm starting to wonde if its even possible.
Any and all help is appreciated.. even if you don't know the answer.. even if you just have a few tips for me, that would be great!
Your question is extremely broad, but I'll try to get you started.
A page in Magento is made up of blocks pulled together using Magento's Layout XML and then rendered by a combination of block objects and php templates (phtml). Describing all of how that feature works is a bit beyond the scope of a simple Q&A, but there are some good guides out there.
I'm not going to talk much about Enterprise because it's not FOSS, but I will say that the default theme is "enterprise", which means that you want to look in app/design/frontend/enterprise/default/layout/page.xml for a fairly global example of layout xml. You can see here that layout xml consists of handles which contain blocks, references and removes, which can contain actions or recur to blocks.
A block in layout xml corresponds to a block class in php, which can be identified by its type. Block type names are fully resolved to their block classpaths in Mage_Core_Model_Layout*.
An action in layout xml calls a method on the containing block. Its children are arguments (the xml node names are ignored for immediate children, but are array keys for grandchildren of the action node.)
A remove lets you ignore an existing block.
A reference allows you to update an existing block by firing off one of its actions or by attaching or removing child blocks.
If you just want to tweak layout, you can do that by dropping a local.xml file in the current theme package. That's a good way to get some practice with layout xml without a lot of the headaches of massive theming. If you want to create your own theme with extensive changes, read the Designer's Guide.
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();
});
HTML:
<a class="targetLink" href="#">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>
<a class="targetLink" href="#">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>
<a class="targetLink" href="#">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>
JS:
$("a.targetLink").toggle(function() {
$(".open").slideUp(350);
$(this).next("div").slideDown(350).addClass("open");
}, function() {
$(this).next("div").slideUp(350).removeClass("open");
});
It works this way: when u press a link with class "targetLink" it opens a DIV below it. Now i need to modify js code to: when i click then link it scrolls to the beginning of that opened div. How can i achieve it? Thanks in advance.
Use scrollTop on the element that you want to scroll to the top of. http://api.jquery.com/scrollTop/
example:
$(this).next("div").scrollTop(0);
I think this is what you need, and maybe more: My jsfiddle. I'm not sure what you've got working so far, but this does what i think you're going for, without the need for additional jquery plugins, etc.
here's the JS(check the jsfiddle for html):
$(".pop").hide();
$(".targetLink").on("click", function(e) {
e.preventDefault();
var n = $(this).next();
if(!$(n).hasClass('open')){
$(".open").removeClass('open').slideUp(200);
$(n).addClass('open').slideDown(200);
}
});
$(".nav").on("click", function(event){
event.preventDefault();
var dest=null;
if(($($(this.hash)).offset().top) > ($(document).height()-$(window).height())){
dest= $(document).height()-$(window).height();
}else{
dest=$($(this.hash)).offset().top;
}
$($(this.hash)).trigger("click");
$('html,body').animate({scrollTop:dest}, 500, 'swing' );
});
Try this really great and simple jQuery plugin - https://github.com/Ashwell/jquery-scrollThis
This should do what you're asking for:
self.scrollToDiv = function scrollToDiv(element,minus){
element = element.replace("link", "");
if(minus==null){
minus=0;
}
$('html,body').unbind().animate({scrollTop: $(element).offset().top+minus},'slow');
};
i'm learning it, but i cant find what's wrong in this!
i want the div2 to get data from the form in div1, called formulario.
i would like to know which item is selected and which button was clicked.
main html file:
<script src="utils/Scripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function sendf(formul, divi, php)
{
var params = Form.serialize($(formul));
new Ajax.Updater(divi, php, {method: 'post', parameters: params, asynchronous:true});
}
</script>
</head>
<body>
<div id="div1">
contenido div1
<form id="formulario" method="POST">
<select size="3" id="lista" onchange="sendf('formulario', 'div2', 'prodiv1.php');">
<option>elemento 1</option>
<option>elemento 2</option>
<option>elemento 3</option>
</select>
<input type="button" id="b1" value="bot1" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
<input type="button" id="b2" value="bot2" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
</form>
<div id="div2" style="background: blue;">
contenido div2
</div>
</div>
</body>
</html>
the php file, prodiv1.php:
<?
echo 'exec: prodiv1.php<br>';
print_r($_POST);
echo serialize($_POST);
if (isset($_POST))
{
foreach ($_POST as $key=>$value)
{
echo $key.'=>'.$value."<br>";
}
}
echo "select: ".$_POST['lista'];
if (isset($_POST['b1'])) {echo 'click: boton1';} else {echo 'click: boton2';}
?>
i've tried a lot of things, and seen that it could be done with event observers, httprequests and such, but what i need is quite easy, and probably there's an elegant way to solve it...
i thank in advance any help!
have a nice day.
guillem
if you dont need to actually process the form contents in some way then you have no need to use Ajax to pass to a PHP script. Depending on what exactly you wanted to display in div 2 you could do something as simple as this:
function sendf()
{
var listvar = $('lista').value;
$('div2').update('select menu value was ' + listvar);
}
This is obviously missing quite a lot of detail and can be massively improved but it should highlight the fact that AJAX is not required.
Edit Looking at the rest of the code you have posted, is AJAX really required for this? surely you are just updating the existing page with data already present on the page, the server has no real part to play in this?
Sorry to dive into jQuery again, but this should allow you to get the values into "div2" without an ajax request.
$(document).ready(function() {
$("input").click(function(e) {
$("#div2").html($(this).attr("id")+" clicked<br />");
updateList();
});
});
function updateList() {
$("#div2").append($("#lista").val() + " selected");
}
In plain English this code says "if an input element is clicked, update the value of div2 with the input variables id, and append the selected value from the list to the result". Hopefully that makes sense to you :)
If you need an easy, elegant way to solve this with AJAX, use the jQuery library's ajax and post methods. For more information take a look here, it will significantly cut down on the size and complexity of your code.