I would like to know whether there are any Drupal (6.x) modules and/or theming tutorials that can implement the effect of hiding and showing certain (clickable) elements of a view listing only when on mouse hover within the item's div (and not as a tool tip or popup). e.g. in http://rusoom.com/ the Author, Like, Info and Share links of each image (view item) only show on mouse over.
Another example will be the display of Favorite, Retweet and Reply displayed on each tweet on mouse-hover, when logged in to Twitter (http://twitter.com) and viewing any tweet stream.
Any help will be deeply appreciated.
Thanks in advance.
I would use the mouseover function in jQuery and create my custom JavaScript code (in a custom module or in the theme). Here is an example of the code:
file: sites/all/themes/MYTHEME/template.php
<?php
function MYTHEME_preprocess_page(&$variables) {
drupal_add_js(drupal_get_path('theme', 'MYTHEME') .'/mytheme.js', 'file');
}
?>
file: sites/all/themes/MYTHEME/mytheme.js
$('.box').mouseover(function() {
$('.hidden').show();
})
HTML (Views generated code)
<div class="box">Mouse over me to see hidden content</div>
<div class="hidden" style="display:none">This is hidden</div>
This is a quick mockup but it should get you in the right direction. If there isn't a module for this you can consider making one from this code!
Good luck
Related
In my app, admins can change form template and users should fill in the blanks in this form using CK Editor or other editors. But when I show form to user, they can remove some fields. I dont wanna this. How can I create "uneditable" fields on CK Editor or can you suggest another editors for that?
Thanks in advance..
Summary TL;DR
You can use the "widget" plugin system, it is designed for this sort of usage where parts of a template are editable, but others are not. It is simply a plugin that extends the widget system to create a non-editable block with editable fields inside (you get drag'n'drop support for free too).
The example simple-box widget is located here and is very informative of the general flow for widgets, you can see the sample here:
https://sdk.ckeditor.com/samples/simplebox.html
The Tutorial
The tutorial for creating that widget is here:
https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html
The important part for users being able to edit certain fields is in the section Adding Editable Parts:
https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html#adding-editable-parts
You can add editables by normal selectors, which makes it easy to have multiple editable fields.
editor.widgets.add( 'simplebox', { // Code defined before...
editables: {
title: {
selector: '.simplebox-title'
},
content: {
selector: '.simplebox-content'
}
} } );
Explanation and Another Example
And the explanation of widgets is here with another example, which is a captioned image:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_widgets.html
Commentary
The widget uses an "upcast" function to determine whether an element should be a widget in the current CKEditor instance. If you are creating separate systems for admin & users, both using CKEditor, you can have separate upcasts for admin vs user so that you can enter templates as an admin, then upcast it to a widget when a user is editing it so that they can only edit the "editables". If you enter them directly as HTML templates in a database or whatnot, then it is even easier since you can just always upcast in the widget plugin.
The relevant section about upcasting is here:
https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html#how-does-a-widget-become-a-widget
And it has a very simple syntax as well:
editor.widgets.add( 'simplebox', {
// Code defined above...
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'simplebox' );
}
} );
#Baki, editor content area is an open space where you can type and remove anything what makes deletion preventing pretty hard if not impossible. There is a large amount of cases to handle.
If you have form fields that you wish some to be editable and some not, please "go around". instead of trying to do this inside the editor, use the editor only for edible fields. Your form can be a standard non-editable HTML page where you have editable parts on which you can create the editor. Example of such a page could look like so:
<div class="container">
<h1><p>Hello </p><p contenteditable="true">[NAME]</p>,</h1>
<div class="text">
<p>I'm pleased to inform you the total sales has reached<p>
<p contenteditable="true">[AMMOUNT]</p>
<p>units...</p>
</div>
</div>
Working code would look like:https://jsfiddle.net/zqmLLjfh/3/
As soon as you create a menu item for a page there is a link that it automatically populated with it. How do i stop wordpress from making these links? I'm capable of making them myself and don't always want them to link to thier specific page.
I figured it out using and dropping it in my header.php
<script type="text/javascript">
jQuery(function($) {
$("li.menu-item-627,li.menu-item-14,li.menu-item-20,li.menu-item-28").children("a").attr('href', "javascript:void(0)");
});
</script>
You have to use firebug or chrome "inspect element" to find out what your menu items are and then just replace the numbers in the code accordingly.
also if you don't want them to show up at all add the following code
<script type="text/javascript">jQuery(function($) { $("li.menu-item-627").contents().hide();});</script>
those two together will hide the disabled menu link
you can then add your own links in the "navigation label" of the page menu field!
good luck and let me know if you have any questions, i will do my best to help!
I am using wordpress and on the page "sidebar.php" I have the following code:
<?php wp_list_pages('post_type=wiki&depth=1'); ?>
It works great but what I need to do it that what I click on a Menu item on the sidebar I need the sub items to display on the main page.
UPDATE:
What I basically need to do is to have the first level items on the left (As it currently is), and when those links are clicked then the sub items of those items will be listed on the index.php (main page).
I am using the wp-wiki plugin to display the pages as wiki pages but the actual but the list is the same, just showing as a different type:
post_type=wiki
Can anyone help please?
Thanks
<?php
wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->ID.'&depth=0');
?>
There's several ways you can accomplish this. WordPress actually has an example of exactly what you're looking to do in the Codex. (link - the last example in that section, right above the "List subpages even if on a subpage" heading)
There's several ways to do this though - that's just one example. But that code above, you just pop into your sidebar.php file. You can also create a widget out of it. And as someone else mentioned, you can use the new menu system for WordPress (but you can indeed, make it dynamic.) But the above example in the Codex is the simplest method.
Actually, an easier method would be just to list all subpages and use CSS to hide and show the child items based on what page you're on. The classes are already set up for you. Just view your source code and you can see it. So you'd do something like:
`li ul.children {display:none; }
li.current_page ul.children { display:block; }`
and variations thereof.
What about using the new menu function in wp 3?
That way you could include your type with any sub page you want (won't be dynamic though) and then add your favorite javascript or good css to show those sub-pages.
I use my custom block for displaying a flash game at the front page of my Drupal 7 installation, but there is also the annoying message:
<div id="first-time"><p>No front page content has been created yet.</p>
<div class="item-list"><ul><li class="first last">
Add new content</li>
</ul></div></div>
below it and I can't remove it. Is there please a hook for adding custom CSS? In my module I would like to make the #first-time light grey or invisible.
I prefer not to add a blank content just to get rid of that text.
Thank you!
Alex
UPDATE:
I've added the following to my module:
function game_init() {
drupal_set_message('XXX init called XXX');
if (drupal_is_front_page()) {
drupal_add_css('#first-time {color: green;}', 'inline');
}
}
but don't see that CSS-code or XXX string inside my front page.
UPDATE2:
Oh, I had to clear the cache and now it works (the Drupal docs seem to be wrong here - there was written that 'inline' CSS is not cached...)
Hiding the CSS is the WRONG way of doing it. why did you created your content as a Custom Block?
you should create a "Page" and set this page as front page in the Configuration->Site Information.
Whatever. you can also use any of these options but is not recommended.
you can also also add a BlankPage by Adding only the Title(then hiding it in PHP on page.tpl.php)
you can add your css in /templates/themes/bartik.info
you can call drupal_add_css on the _init() hook of your custom module.
Blocks are used to display information in every page(although we can set to display only on certain pages). Say For Example. A Menu, or A Shopping Cart etc.
If you want to add some CSS for a module, you should use drupal_add_css()
Why not simply add this CSS to your theme?
I have recently started on Drupal (v 7) to create a small company website.
After much reading and watching tutorials, I have started to create my new theme from scratch. I have defined regions and customised the page.tpl.php file to place them into the template (and node.tpl.php etc). All these changes are working and the layout is looking good, and any item I add appears in the main content output.
In my footer region, I have created a block in which I would like links to appear. I have also created a content-type called footer links (with relevant fields) and I have created a couple items of content for it.
The block is showing fine (the title and block body appear). However, despite scouring the documentation, I am not sure what needs to be done to make the items of content (footer links) appear in this block.
Any help appreciated, thanks!
info file snippet for a region
regions[footer_one] = Footer Column One
... and code in page.tpl.php
<div class="one">
<?php if ($page['footer_one']): ?>
<?php print render($page['footer_one']); ?>
<?php endif; ?>
</div>
If you just need simple footer links, no need to create a content type for this, you can simple create a menu and add a menu block in footer.
If you really want to use your own content type for these links, you can create a view (with views module) to display what you want in a block.
About creating a theme from scratch, did you try before to create a sub theme ?
PS: I don't think drupal is a good cms for "small company website".
Views is really powerful and sounds like it will do exactly what you need. Otherwise, you can create a menu for your items and place that menu in your region as well.
Regarding your original code, you'd probably need to grab the information about the nodes from the database in order to construct a list on your own, but views basically does that for you :)