html Marquee tag
if you want to create a scrolling functionality of text,images etc in your site and if you dont know/want javascript for this you can use marqquee tag
marquee tag is supported in almost all modern browsers
the tag block will be look something like this
<marquee behavior="scroll" direction="left">
<img src="assets/templates/base/css/images/1.png" alt="" />
<img src="assets/templates/base/css/images/2.png" alt="" />
<img src="assets/templates/base/css/images/3.png" alt="" />
<img src="assets/templates/base/css/images/5.png" alt="" />
</marque>
you can specify which direction it should scroll by changing direction to top,bottom,rigth or left
and if you want to stop scrolling when user mouseover a image/text you can simply stop it and start sliding when user mouseout from image/text like adding this code in marquee tag
onmouseover=”this.stop();” onmouseout=”this.start();
hope this simple tag may help someone
using https with modx
in many cases you want to secure your site in many ways.one of them is https
if you want to use https in your modx cms you can simple use it.
for example if you want to use https for all urls you just need to change a system setting called scheme
just go to system setting and search for scheme setting and change its value to 1
in case if you want to have only few selected pages should be accessed with https you just need to create a simple plugin and a template variable
just go to template variables in manager and create one tv with encryption as name use https as caption ,Check Box as input type and Yes==1 as input option values.assign this tv to your template
next create a plugin with a name say simpleSSL
copy this below code
event->name == 'OnLoadWebDocument') {
unset($_GET['q']);
$encryption_value = $modx->resource->getTVValue('encryption');
$encryption = false;
if($encryption_value == 1){
$encryption = true;
}
$ssl = false;
if($_SERVER['HTTPS'] == 1) {
$ssl = true;
}
elseif($_SERVER['HTTPS'] == 'on'){
$ssl = true;
}
elseif($_SERVER['SERVER_PORT'] == 443) {
$ssl = true;
}
if($ssl && !$encryption) {
$url = $modx->makeUrl($modx->resource->get('id'), '', http_build_query($_GET), 'http');;
$modx->sendRedirect($url);
}
else if(!$ssl && $encryption) {
$url = $modx->makeUrl($modx->resource->get('id'), '', http_build_query($_GET), 'https');
$modx->sendRedirect($url);
}
}
now just check the <strong>OnLoadWebDocument</strong> check box from systemevents tab of this plugin and save it
now just go to any page you want to have hhtps enabled and check the use https tv from template variables in tab in that resource and thats it
in case if you want to create a link with https for a page 5 you just need to change the link tag to [[~5? &scheme=`https`]]
if you ever want to secure your manager with https just change htaccess of manager folder to
RewriteEngine On
RewriteBase /
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://yoursite.com/manager/$1
now your manager will be accessed with htpps only
Note: assumed you have already installed ssl in your site
hope this may help someone
modx cache
in modx your website content is mostly stored in database.apart from the content your custom components will interact more often with database
for every page request instead of depending upon database results all the time you can ache the results
modx already implemented caching in number of ways
all your pages will be cached by default.if you think a page have dynamic content which can be changed all the time you can disable the caching of the page,just by unchecking Cacheable filed in page settings of the document.remeber if the page is cached you cant see the changes immidiatly in frontend
but caching is not only limited to page cache, if your site have large data which can be be used with custom components you can ache the database results programatically
in general modx will store the cached data in core/cache/ folder with sections as folder
for example you have to show your custom hotels data table with snippets .for every user request you are trying to retrieve 100′s of hotels information from database.
$hotels=$modx->getCollection('hotelInformation',array('location'=>'newyork'));
foreach($hotels as $hotel){
$hotelArray=$hotel->toArray();
//......do whatever you want ......
}
if 10000 users requested for hotel data 1000 times you need to interact with database
in case if the data in databse about the hotel wont change all the time you can ache the results and save database requests whichmakes your site faster
$hotels=$modx->getCollection('hotelInformation',array('location'=>'newyork'));
$cachedHotels=array();
foreach($hotels as $hotel){
$cachedHotels[]=$hotel->toArray();
}
//we have array of data ready to be cached,now just ache the data
$modx->cacheManager->set('newyorkhotels',$cachedHotels);
/* =============================================================================
from next time onwards whenever users request for newyork hotels
you will simply use the cached results instead of asking from database
this caching will give hight perfor,mance to your site while your traffic increases
========================================================================== */
//the above ached data will be saved in core/ache/default/newyorkhotels.cache.php
//from next user requests
$hotels=$modx->cacheManager->get('newyorkhotels');
if(!$hotels) $hotels=$modx->getCollection('hotelInformation',array('location'=>'newyork'));
foreach($hotels as $hotel){
//--now use this hotel array like you did before
}
you can also specify where to store the cached results and expired time of the ache results
$cachetime=3600;
$cacheOptions = array(
xPDO::OPT_CACHE_KEY => 'hotels//results',
);
//now the results will be saved in core/cache/hotels//results folder
$cachedHotels==$modx->cacheManager->get('newyorkhotels',$cacheOptions);
if(!$cachedHotels){
$hotels=$modx->getCollection('hotelInformation',array('location'=>'newyork'));
foreach($hotels as $hotel){
$cachedHotels[]=$hotel->toArray();
}
$modx->cacheManager->set('newyorkhotels',$data,$cachetime,$cacheOptions);
}
foreach($cachedHotels as $hotel){
//--now use this hotel array like you want
}
you not use caching with db results .you can also use it with external feeds,external API integrations.cache will be more usefull when your site traffic is hight
i hope this will help someone who is dealing with complex data
change font size of site
For accesablity reason you may want to add a widget which will allow visitors to increase or decrase the font size
creating this widget is simple. first .you just make sure you have specified font size for all selector in percentile(ex:110%,120% etc)
for example if you can give css for selectors like this
body{font-size:13px; font-family:arial}
h1{ font-size:180%}
h2{ font-size:160%}
h3{ font-size:140%}
h4{ font-size:120%}
p,#container,.content{ font-size:100%}
#menu li a{ font-size:110%}
now create a widget like this

<div id="site-fonts">
<span>change text size</span>
<a id="font-increase" href="#"></a>
<a id="font-decrease" href="#"></a>
</div>
css for the above widget
#font-increase,#font-decrease{ margin:0 3px; height:17px; width:17px; height:17px; text-decoration:none;}
#font-increase{ background:url(images/font-increase.png) no-repeat;}
#font-decrease{background:url(images/font-decrease.png) no-repeat;}
add the above widget in your webpage better on top
if you are suing jquery simply add this javascript code
<script type="text/javascript">
function changeFont(){
$('#font-increase').click(function(event){
event.preventDefault();
font=$('body').css('font-size');
font=parseInt(font.replace('px',''));
font=font+1;
$('body').css('font-size',font+'px');
});
$('#font-decrease').click(function(event){
event.preventDefault();
font=$('body').css('font-size');
font=parseInt(font.replace('px',''));
font=font-1;
$('body').css('font-size',font+'px')
});
}
$(document).ready(function() {
changeFont();
});
</script>
incase if you are using mootools
<script type="text/javascript">
function changeFont(){
$('#font-increase').addEvent('click',function(event){
event.stop();
font=$('body').getStyle('font-size').replace('px','').toInt();
font=font+1;
$('body').setStyle('font-size',font+'px');
});
$('#font-decrease').addEvent('click',function(event){
event.stop();
font=$('body').getStyle('font-size').replace('px','').toInt();
font=font-1;
$('body').setStyle('font-size',font+'px')
});
}
window.addEvent('domready',function(){
changeFont();
});
</script>
you are done.now visitors can click the increase and decrease links to change text size in your site and your site have a extra accesabity feature
modx login redirecting user to referred page
Redirecting user to referred page
while using modx login you may want to redirect user to the referred page after successfull login .we can do this easily as Login component already have a property called redirectToPrior
for example when you send user to login page from about us page ,after user is suucessfully logged you want him to redirect to same aboutus page
iam creating a simple snippet to show login and logot links based on present user authentication status and also setting HTTP_REFERER which is used later in login snippet.create a snippet called logintopbar
<?php
$output='';
//assuming login page id is 5
$log_url=$modx->makeUrl(5);
if($modx->user->isAuthenticated()){
$output.='<span><a href="'.$log_url.'?service=logout">logout</a></span>';
}
else{
$_SERVER['HTTP_REFERER']=$_SERVER["REQUEST_URI"];
$output.='<span><a href="'.$log_url.'">login</a></span>';
}
return $output;
we are simply grabbing links and also setting HTTP_REFERER to present url . now place this snippet [[!logintopbar]] in your template .so when you click that link it goes to login page
in login page while calling login snippet set redirectToPrior to TRUE like [[Login? &redirectToPrior=`true` ]]
now user will be redirected to referred page
hope this may help some one