I'm learning how PHP works, but at the same time I have to redesign an custom CMS.
CMS is written in PHP, I have restyled the default menu using CSS and added a side slide effect. But now, I need to keep this side panel opened, when I click on a link from the menu. I think, the easiest way is prevent page reload = to make menu links open in a page content section (<div id="content"></div>). But because in a source code, there are lots of functions, variables etc., I really need your help, how to proceed.
/Admin/index.php - content from menu sections (placed in separate files) is called here using a function
AdminLib/CSS/style.css - contains also styles for side menu
AdminLib/Include/menu.php - here is defined a side menu (ul, li)
/Admin/index.php
...
...
...
<body>
<?php if ($page != 'login') {
$menu_obj = new AdminMenu(dirname(__FILE__).'/Tabdefs/');
echo $menu_obj->GetHtml();
?>
<div class="site-wrap">
<?php
}
ContContent();
?>
</div>
...
...
...
AdminLib/Include/menu.php
...
...
...
//vrati html pro svoje menu
public function GetHtml() {
$html = '<ul class="navigation">';
$html .= $this->GetHtmlRecursive($this->menu_def);
$html .= '</ul>';
$html .= '<input type="checkbox" id="nav-trigger" class="nav-trigger" /><label for="nav-trigger"></label>';
return $html;
}
/********** PRIVATE ***********/
//vrati html pro vsechny polozky menu v poli $arr; Pokud tam nejaka ma sub, tak se vola rekurzivne
private function GetHtmlRecursive($arr) {
$html = '';
foreach ($arr AS $item) {
//neukazovane polozky rovnou preskakuju
if ($item['show'] != 'Y')
continue;
//ted jestli mam podpolozky, tak rekurzujeme
if (isset($item['sub'])) {
$html .= '<li class="nav-item">'.$item['nazev'].''.
'<ul class="nav-item">';
$html .= $this->GetHtmlRecursive($item['sub']);
$html .= '</ul></li>';
}
else {
//pokud podpolozky nemam, tak vypisu normalni polozku
$html .= '<li class="nav-item">'.$item['nazev'].'</li>';
}
} //foreach pres polozky $arr
return $html;
}
...
...
...
I trying to integrate something like this - using jQuery script (How to target the href to div - 2nd and 3rd link on JsFiddle) into my source code, but I need help with realisation - I wasn't able to make it working.
Instead of getting the links to target specific divs, you could always use anchor tags. They use the a tag to go to the relevant point on a page.
An anchor tag would be created like the following:
<a name="location1"></a>
To link to that with your a tag, you can then do:
Link Text
That link will then take you to the anchor location on the page.
If you really want to do it by div ID and use jQuery (which will enable you to scroll to it rather than a straight jump), then if you create your link to something like the following :
Link Text
If the page then has the div:
<div id="location1">Contrent of the div</div>
and your page has the function (either on page or in an external file) :
function scrollToLocation(location_id) {
$('body').animate({
scrollTop: $('#' + location_id).offset().top
}, 500);
}
There's more information on Stack Overflow in the following questions:
jQuery .scrollTop(); + animation
jQuery jump or scroll to certain position, div or target on the page from button onclick
Related
I have many articles, divided into sections, stored in a database. Each section consists of a section tag, followed by a header (h2) and a primary div. Some also have subheaders (h3). The raw display looks something like this:
<section id="ecology">
<h2 class="Article">Ecology</h2>
<div class="Article">
<h3 class="Article">Animals</h3>
I'm using the following DOM script to add some classes, ID's and glyphicons:
$i = 1; // initialize counter
// initialize DOMDocument
$dom = new DOMDocument;
#$dom->loadHTML($Content); // load the markup
$sections = $dom->getElementsByTagName('section'); // get all section tags
if($sections->length > 0) { // if there are indeed section tags inside
// work on each section
foreach($sections as $section) { // for each section tag
$section->setAttribute('data-target', '#b' . $i); // set id for section tag
// get div inside each section
foreach($section->getElementsByTagName('h2') as $h2) {
if($h2->getAttribute('class') == 'Article') { // if this div has class maindiv
$h2->setAttribute('id', 'a' . $i); // set id for div tag
}
}
foreach($section->getElementsByTagName('div') as $div) {
if($div->getAttribute('class') == 'Article') { // if this div has class maindiv
$div->setAttribute('id', 'b' . $i); // set id for div tag
}
}
$i++; // increment counter
}
}
// back to string again, get all contents inside body
$Content = '';
foreach($dom->getElementsByTagName('body')->item(0)->childNodes as $child) {
$Content .= $dom->saveHTML($child); // convert to string and append to the container
}
I'd like to modify the above code so that it places certain examples of "inner text" between tags.
For example, consider these headings:
<h3 class="Article">Animals</h3>
<h3 class="Article">Plants</h3>
I would like the DOM to change them to this:
<h3 class="Article"><span class="label label-default">Animals</span></h3>
<h3 class="Article"><span class="label label-default">Plants</span></h3>
I want to do something similar with the h2 tags. I don't yet know the DOM terminology well enough to search for good tutorials - not to mention confusion with DOM programs and jQuery. ;)
I think these are the basic functions I need to focus on, but I don't know how to plug them in:
$text = $data->textContent;
elementNode.textContent=string
Two Notes: 1) I understand I can do this with jQuery (perhaps a lot easier), but I think PHP might be better, as they say some users can have JavaScript disabled. 2) I'm using the class "Article" largely to distinguish elements I want to be styled by PHP DOM. A header with a different class, or no class at all, should not be affected by the DOM script.
All,
I've got the following code to display a group of instagram photos and then I open them on my site with fancybox:
$output .= '<script type="text/javascript">
jQuery(document).ready(function($) {
$(".fancybox").fancybox();
});
</script>';
$output .= '<div id="bd-instagram">';
for($i=0; $i<$count; $i++){
$output .= '<div class="bd-instagram-item">
<a rel="instagram-widget" class="fancybox" title="This is a title" href="'.$images[$i]['image_large'].'">
<img src="'.$images[$i]['image_small'].'" alt=""></a>
</div>';
}
The fancybox opens up and displays the title "This is a title" underneath the image. However I'd actually like to make this a link so that when someone clicks on the title it opens up a link. I was trying to do something like this:
<a rel="instagram-widget" class="fancybox" title="Testing" href="'.$images[$i]['image_large'].'">
That doesn't work though and produces some odd HTML on my page. Does anyone have any idea on how to do something like that this?
Try encoding the HTML in the title. For example, use < for a < symbol. No idea whether this will work, but it's worth a try.
Fancybox has a titleFormat option, which you can set to a callback. I'm seeing this like:
function formatTitle(){
return "test";
}
$(".fancybox").fancybox({
'titleFormat' : formatTitle
});
I'm not sure I'm right, but the documentation says:
titleFormat - Callback to customize title area. You can set any html - custom image counter or even custom navigation
An ex developer of ours when working on one of our first versions of our internal PHP framework integrated the dropdown element of main navigation using javascript and I need to get a fix applied for IE8 which is causing the dropdown to appear offset even though using CSS displays fine in Firefox / Chrome.
The site in question is http://www.benchmemorials.co.uk/
In the event there is sub menu items from the main navigation that use a dropdown, javascript is called to display this I believe (below)...
<script type="text/javascript">
$(document).ready(function() {
var position = $('#link_why-buy-from-us').offset();
$('.dropdown').css(position);
$('#link_why-buy-from-us').mouseover(function() {
$('.dropdown').show();
});
$('.dropdown').mouseover(function() {
$('.dropdown').show();
});
$('.dropdownstyle').mouseover(function() {
$('.dropdown').show();
});
$('#link_why-buy-from-us').mouseleave(function() {
$('.dropdown').hide();
});
$('.dropdown').mouseleave(function() {
$('.dropdown').hide();
});
$('.dropdownstyle').mouseleave(function() {
$('.dropdown').hide();
});
});
</script>
I'm not too hot on javascript but from what I gather, I presume the above is instructing the drop down to appear below the 'Why Buy from Us' top navigation menu item. As I mention, this is working as expected in Firefox/Chrome.
However, the issue appears to be the fact that somewhere along the line, inline CSS is being generated dynamically for the dropdown class - this is dynamically generating
style="top: 61px; left: 964px; display: none;"
Every file on the server has been searched and nowhere is this specified, my only guess is that the javascript above is somehow creating this line of CSS which is therefore preventing me from altering the position of the dropdown in the IE only stylesheet to fix the display in IE8.
The rest of the code for the dropdown menu from the php file is below:-
<div class="dropdown"><div class="dropdownstyle">
<?php
mysql_select_db($database_config, $config);
$query_sub_pages = "SELECT * FROM `pages` WHERE site_id = '".$current_site_id."' AND menu_location = 'sub' ORDER BY `order` ASC";
$sub_pages = mysql_query($query_sub_pages, $config) or die(mysql_error());
$row_sub_pages = mysql_fetch_assoc($sub_pages);
$totalRows_sub_pages = mysql_num_rows($sub_pages);
$current_sub_link = 0;
do {
$current_sub_link = $current_sub_link + 1;
?>
<p<?php if ($current_sub_link != $totalRows_sub_pages) {echo ' style="margin-bottom: 10px;"';}; ?>><a class="sub_link" href="<?php echo $site_base.$row_sub_pages['page_location']; ?>"><?php echo $row_sub_pages['page_display_name']; ?></a></p><?php //if ($current_sub_link != $totalRows_sub_pages) {echo '<br />';}; ?>
<?php } while ($row_sub_pages = mysql_fetch_assoc($sub_pages)); ?>
</div>
</div>
As you can see, there is no inline CSS applied to .dropdown. All CSS from the sylesheets can be viewed if you inspect element in browser.
Please could anyone advise how or if it is possible to prevent this dynamic CSS positioning from being generated or an alternative / easier method of ensuring the dropdown appears consistently across all browsers including IE?
Thanks in advance.
The positioning is done by this code:
var position = $('#link_why-buy-from-us').offset();
$('.dropdown').css(position);
It takes the position of #link_why-buy-from-us relative to the document, and adds it to the .dropdown element.
I don't know if you're familiar with jQuery, but the code above is written using that JavaScript library. For more documentation about .offset(), look here: http://api.jquery.com/offset/
I need some help with removing some elements from my page with jQuery, currently I have PHP loop that builds links,
<?php
$findMore = array();
$i = 0;
foreach ($backgrounds as $row) :
?>
<a id="<?=$i;?>" class="findOutMore" href="<?=$row['backgroundAddress']; ?>">Find Out More</a>
<?php
$i++;
endforeach;
?>
This creates links that have display none, on then each time the rel of link chages some where else in the HTML then a new link is displayed using this code,
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
var rel = $('ol#controls li.current a').attr('rel');
if($('a#'+rel).hasClass('findOutMore')) {
$('a#'+rel).css({
display:'block',
})
}
};
So everytime the rel changes I get a new link on the page but i need the previous link to dissapear? Is this possible and how?
I'm not quite sure I understood your question, but if you want only one link with the 'findOutMore' class shown at a time, I would do the following (just at the end of your code):
var rel = $('ol#controls li.current a').attr('rel');
if($('a#'+rel).hasClass('findOutMore')) {
$('a.findOutMore:visible').hide();
$('a#'+rel).show();
}
You can call
$(".findOutMore").hide();
before showing the new link. The idea is that all links of interest have the same class, so that can be easily hidden.
I'm trying to style a custom menu within drupal.
I've sucessfully styled to display a background image, but the problem is that the menu item title still displays. So I get a nice image, with blazoned all over it.
Is there a template function I could use to format the custom menu and remove the text portion from the hyperlink?
I've done something similar on my primary links (see below) but I could do with some help figuring out how to do so on the custom menus.
function primary_links_add_icons() {
$links = menu_primary_links();
$level_tmp = explode('-', key($links));
$level = $level_tmp[0];
$output = "<ul class=\"links-$level\">\n";
if ($links) {
foreach ($links as $link) {
$link = l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']);
$cssid = str_replace(' ', '_', strip_tags($link));
$link = preg_replace('#(<a.*?>).*?(</a>)#', '$1$2', $link);
$output .= '<li id="'.$cssid.'">' . $link .'</li>';
};
$output .= '</ul>';
}
return $output;
}
And then this called within the page.tpl.php
print primary_links_add_icons();
Thanks for any help!
theme_menu_tree would be the way to resolve this on the template.php itself. The meat of your function would be identical to your function above. Documentation is at http://api.drupal.org/api/function/theme_menu_tree
But, I would recommend using CSS for what you're doing. If the text is removed entirely (via php) then you'll be depending on the user's browser to display the images and CSS properly and make navigation possible.
You might consider including both the image and the text, but making the text portion display: none so that it degrades more gracefully if CSS isn't loaded properly.