Search Results

Search found 4135 results on 166 pages for 'img'.

Page 109/166 | < Previous Page | 105 106 107 108 109 110 111 112 113 114 115 116  | Next Page >

  • How to connect MTS MBlaze on ubuntu 11.04

    - by murali_ma
    i have installed ubuntu 11.04 inside the windows xp. i have MTS Mblaze USB Modem. (my service provider is MTS MBlaze,india) i want to use Mblaze into ubuntu so that i did the following steps for make connecting the device. from the task bar->edit connections->mobile broadband->choose country->mts mblaze and ok i give username and password ([email protected] and password MTS. ok now i enable mobile broadband , MTS MBlaze connection1(connection name) from task bar. steps followed from "http://randomshandom.wordpress.com/2010/12/20/how-to-connect-mts-mblaze-device-in-ubuntu-10-10-11-04/#more-3" for the first time it successfully connected and browse the internet. after i restart the system i connect it. it does not connected. it shows Modem network disconnected. i accessed many times and delete the connection and recreated but i does not help me. if i try to connect device i think it the search the network, i saw the wave signal. img Image for showing problem:

    Read the article

  • What to do when 'dpkg --configure -a' fails with too many errors?

    - by rudivonstaden
    During an upgrade from lucid (10.04) to precise (12.04), the X session froze, and I have been trying to recover the upgrade to get a stable system. I have performed the following steps: Used ssh to log in to the stalled system over the network. Checked the contents of the /var/log/dist-upgrade directory. There was no activity on main.log, apt.log or term.log. top showed that process 'precise' was using about 3% CPU, but I could find no evidence that the upgrade process was still doing anything. 'dpkg' did not show up in top, but it came up with pgrep dpkg | xargs ps Killed the 'dpkg' and 'precise' processes Tried to recover the upgrade by running sudo fuser -vki /var/lib/dpkg/lock;sudo dpkg --configure -a. This was partially successful (some packages were configured), but failed with the message Processing was halted because there were too many errors. I ran the same command a few times, and each time some packages were configured but others failed. Tried running sudo apt-get -f install. It fails with similar errors to dpkg. The current situation is that dpkg --configure -a and sudo apt-get -f install fails with two kinds of error: Dependency issues, e.g.: dpkg: dependency problems prevent configuration of cifs-utils: cifs-utils depends on samba-common; however: Package samba-common is not configured yet. dpkg: error processing cifs-utils (--configure): dependency problems - leaving unconfigured Resource conflict, e.g.: debconf: DbDriver "config": /var/cache/debconf/config.dat is locked by another process: Resource temporarily unavailable Additionally, it seems there's reference to potential boot problems, so I'm not keen to reboot without fixing the install first: dpkg: too many errors, stopping Processing triggers for initramfs-tools ... update-initramfs: Generating /boot/initrd.img-3.2.0-25-generic cryptsetup: WARNING: failed to detect canonical device of /dev/sda1 cryptsetup: WARNING: could not determine root device from /etc/fstab So my question is, how to get a working install when dpkg --configure -a fails?

    Read the article

  • Rich snippet for Google Custom Search - Schema.org

    - by Joesoc
    I am trying to extract the book URL from a link using microdata. The format is specified in schema.org. Here is my html. <div class="col-sm-4 col-md-3" itemscope itemtype="http://schema.org/Book"> <div class="thumbnail"> <img src="{{ book.thumbnailurl }}" itemprop="thumbnailUrl" style="width: 100px;height: 200px;"> <div class="caption"> <h4><span itemprop="name">{{ book.name }}</span> - <span itemprop="author">{{ book.author }}</span></h4> <p><span itemprop="about"> {{ book.about }}</span></p> <p> <a href="{{ book.url }}" itemprop="url" onclick="trackOutboundLink(‘{{ book.name }}’);"> <button type="button" class="btn btn-default btn-md"> <span class="glyphicon glyphicon-book"></span>Read </button> </a> </p> </div> </div> </div> When I use google snippet testing tool the JSON API returns book as a html link. However when I make the call in javascript the value of url is text("Read"). What am i missing ?

    Read the article

  • How to create a bootable system with a squashfs root

    - by cldfzn
    My goal is to be able to take a customized root file system loaded with the software I want. So far I've created a squashed filesystem using debootstrap and chroot to install the software I want on the system. The problem I am now running in to.. whenever I boot in to the system, my user accounts that were set up in the chroot do not work. First boot everything works out, second boot I can't log in. That is baffling to me. Any one know a reason or a place to start looking? Update To get a working system with a squashfs filesystem: sudo apt-get install live-boot live-boot-initramfs-tools extlinux sudo update-initramfs -u Create a squashfs file from a bootstrapped or running ubuntu filesystem with whatever packages you want available. https://help.ubuntu.com/community/LiveCDCustomizationFromScratch provides good instructions for creating a debootstrapped system to build on. Format the target drive with ext2/3/4 and enable the bootable flag. Create the folder layout on the target drive and install extlinux: mkdir -p ${TARGET}/boot/extlinux ${TARGET}/live extlinux -i ${TARGET}/boot/extlinux dd if=/usr/lib/syslinux/mbr.bin of=/dev/sdX #X is the drive letter cp /boot/vmlinuz-$(uname -r) ${TARGET}/boot/vmlinuz cp /boot/initrd.img-$(uname -r) ${TARGET}/boot/initrd cp filesystem.squashfs ${TARGET}/live Create ${TARGET}/boot/extlinux/extlinux.conf with the following contents: DEFAULT Live LABEL Live KERNEL /boot/vmlinuz APPEND initrd=/boot/initrd boot=live toram=filesystem.squashfs TIMEOUT 10 PROMPT 0 Now you should be able to boot from the target drive in to your squashed system.

    Read the article

  • Target a specific Button and Style it

    - by CoffeeAddict
    I've got a button inside my div. The image is showing some kind of padding around it <div id="member-name" hidden="true"> <span><button id="expandButton"><img src="~/Content/Images/plus.jpg" /></button></span><p id="member-fullName"></p> </div> Not sure how to get rid of this issue, see the grey around that plus image..I want to get rid of that. Here's the image alone, see that there is nothing around it: here is my css (just various related snippets to all this): div { padding: 0px;} input[type="submit"], input[type="button"], button { background-color: #ffffff; cursor: pointer; font-size: 11px; font-weight: 600; padding: 0px; margin: 0px; width: auto; vertical-align: middle; } #member-name { margin: 30px 0px 0px 0px; height: 20px; font-weight: bold; color: white; padding: 1px 1px 0px 1px; background-color: #d28105; border: 1px solid darkgray; overflow: hidden; } #member-name.p { display: inline-block; } /* #member-name.input[type="submit"] { margin: 0px;padding: 0px; } - this does not work, probably wrong syntax anyway */

    Read the article

  • How to connect MTS MBlaze

    - by murali_ma
    i have installed ubuntu 11.04 inside the windows xp. i have MTS Mblaze USB Modem. (my service provider is MTS MBlaze,india) i want to use Mblaze into ubuntu so that i did the following steps for make connecting the device. from the task bar->edit connections->mobile broadband->choose country->mts mblaze and ok i give username and password ([email protected] and password MTS. ok now i enable mobile broadband , MTS MBlaze connection1(connection name) from task bar. steps followed from "http://randomshandom.wordpress.com/2010/12/20/how-to-connect-mts-mblaze-device-in-ubuntu-10-10-11-04/#more-3" for the first time it successfully connected and browse the internet. after i restart the system i connect it. it does not connected. it shows Modem network disconnected. i accessed many times and delete the connection and recreated but i does not help me. if i try to connect device i think it the search the network, i saw the wave signal. img Image for showing problem:

    Read the article

  • Mobile web app, styling in percentages; I can't get height to work [migrated]

    - by Mick79
    I am building a mobile app for a band and obviously want it to display well in all the plethora of handsets out there today. I built it at first for my own device and it looks and works great, so now I am reworking it in percentages so that it works in all devices. I have a slider (jquerytools) going on and if i set width to 100% then it is perfectly wide in my iphone and my ipad... success, however I am not having any luck with height. It seems to only accept a height in px. If i set a height in percent it just doesn't display. any ideas? #header{ width:100%; height:198px; position:relative; z-index: 20; box-shadow: 0 0 10px white; } .scrollable { /* required settings */ position:relative; overflow:hidden; width: 100%; height:100%; box-shadow: 0 0 20px purple; z-index: 20; } .scrollable .items { /* this cannot be too large */ width:500%; height:100%; position:absolute; clear:both; box-shadow: 0 0 30px green; } .items div { float:left; width:20%; height:100%; } /* single scrollable item */ .scrollable img { float:left; width:100%; height:100%; /* height:198px; */ } /* active item */ .scrollable .active { border:2px solid #000; position:relative; cursor:default; } `

    Read the article

  • How do I add a boot from cd option to yaboot?

    - by Sergiu
    So I'm dual-booting Ubuntu 12.04.1 on my iMac G5 powepc alongside Mac OS X and I want to add a boot cd option to yaboot because I'm trying to boot a scratched Mac OS X installation DVD that takes a while to read and the frst bootstrap moves on too fast. How do I edit the timeout for the first bootstrap anyways? So, my main question is, how do I add a cd booting option to yaboot and then, how doI boot it? The devalias from OpenFrmware tells me that 1 have 2 cd-rom instaled, on is /ht/pci@3/ata-6/disk@0 and the other on ends with a 1 instead of a zero. These are the contents of my yaboot.conf file: yaboot.conf generated by the Ubuntu installer run: "man yaboot.conf" for details. Do not make changes until you have!! see also: /usr/share/doc/yaboot/examples for example configurations. For a dual-boot menu, add one or more of: bsd=/dev/hdaX, macos=/dev/hdaY, macosx=/dev/hdaZ boot="/dev/disk/by-id/scsi-SATA_ST3160023AS_5MT1GCWA-part2" device=/ht@0,f2000000/pci@3/k2-sata-root@c/@0/@0 partition=4 root="UUID=798a048f-ee48-49e0-bba3-111aed8dee04" timeout=12000 install=/usr/lib/yaboot/yaboot magicboot=/usr/lib/yaboot/ofboot enablecdboot macosx="/dev/disk/by-id/scsi-SATA_ST3160023AS_5MT1GCWA-part3" image=/boot/vmlinux label=Linux read-only initrd=/boot/initrd.img append="quiet splash" What do I add here so that yaboot will boot from my cd in like 3 minutes after startup? Thanks!

    Read the article

  • how to solve this problem

    - by Surbir
    root@me-desktop:~# sudo apt-get install aircrack-ng Reading package lists... Done Building dependency tree Reading state information... Done The following NEW packages will be installed: aircrack-ng 0 upgraded, 1 newly installed, 0 to remove and 446 not upgraded. 1 not fully installed or removed. Need to get 1,579kB of archives. After this operation, 2,843kB of additional disk space will be used. Get:1 http://archive.ubuntu.com/ubuntu/ maverick/universe aircrack-ng i386 1:1.1-1 [1,579kB] Fetched 1,579kB in 1min 9s (22.7kB/s) Selecting previously deselected package aircrack-ng. (Reading database ... 520739 files and directories currently installed.) Unpacking aircrack-ng (from .../aircrack-ng_1%3a1.1-1_i386.deb) ... Processing triggers for man-db ... Setting up linux-image-3.0.1-030001-generic (3.0.1-030001.201108060905) ... Running depmod. update-initramfs: Generating /boot/initrd.img-3.0.1-030001-generic Warning: No support for locale: en_US.utf8 Examining /etc/kernel/postinst.d. run-parts: executing /etc/kernel/postinst.d/dkms 3.0.1-030001-generic /boot/vmlinuz-3.0.1-030001-generic run-parts: executing /etc/kernel/postinst.d/initramfs-tools 3.0.1-030001-generic /boot/vmlinuz-3.0.1-030001-generic run-parts: executing /etc/kernel/postinst.d/nvidia-common 3.0.1-030001-generic /boot/vmlinuz-3.0.1-030001-generic run-parts: executing /etc/kernel/postinst.d/pm-utils 3.0.1-030001-generic /boot/vmlinuz-3.0.1-030001-generic run-parts: executing /etc/kernel/postinst.d/update-notifier 3.0.1-030001-generic /boot/vmlinuz-3.0.1-030001-generic run-parts: executing /etc/kernel/postinst.d/zz-update-grub 3.0.1-030001-generic /boot/vmlinuz-3.0.1-030001-generic exec: 15: update-grub: not found run-parts: /etc/kernel/postinst.d/zz-update-grub exited with return code 2 Failed to process /etc/kernel/postinst.d at /var/lib/dpkg/info/linux-image-3.0.1-030001-generic.postinst line 1010. dpkg: error processing linux-image-3.0.1-030001-generic (--configure): subprocess installed post-installation script returned error exit status 2 Setting up aircrack-ng (1:1.1-1) ... Errors were encountered while processing: linux-image-3.0.1-030001-generic E: Sub-process /usr/bin/dpkg returned an error code (1) root@me-desktop:~#

    Read the article

  • after upgrade from 10.04 to 12.04 cannot boot with linux 3.2.0-24-generic-pae

    - by Ricardo
    After upgrade from 10.04 to 12.04, I cannot boot with linux 3.2.0-24-generic-pae: process gets frozen in a xubuntu initialization screen (I had qimo installed). If I try the recovery mode (with the same Linux version), booting freezes after this message: Begin: Mounting root file system. If in grub menu I choose Previous Linux versions, I can boot using Linux 2.6.32-41-generic-pae. But once logged in, some things don't seem to work (apt-get update fails, update manager fails, HID menu does not provide suggestions...) (to be honest, I have no idea whether this is part of the bigger issue) Reading in Ask Ubuntu through apparently similar problems, I decided to follow some advices: got boot-repair and run it. The problem remains & I got this report. I also run as root in terminal $ sudo update-initramfs -u and this is what I got: update-initramfs: Generating /boot/initrd.img-3.2.0-24-generic-pae cryptsetup: WARNING: failed to detect canonical device of /dev/sda1 cryptsetup: WARNING: could not determine root device from /etc/fstab /tmp/mkinitramfs_EIDlHy/scripts/classmate-bottom/45xconfig: 9: .: Can't open /scripts/casper-functions What else? My pc is Intel® Core™ i7 CPU 870 @ 2.93GHz × 8, graphs is GeForce 8400 GS/PCIe/SSE2, memory is 7,8 GiB. I have two questions: Is this a bug in the newest kernel I should report? Is there anything I can do appart from a fresh install?

    Read the article

  • What is the correct way to code incoming links for SEO?

    - by DC01
    Our site is giving out 'badges' to our authors. They can post these on their personal blogs and they will serve as incoming links to our site. We want to give out the best possible code for SEO without doing anything that would get us flagged. I would like to know what you're thoughts are on the following snippet of code and if anyone has any DEFINITE advice on dos and donts with it. Also, let me know if any of it is redundant or not worth it for SEO purposes. I've kept the css inline since some of the writers would not have access to add link to external CSS. I've changed the real values, but title, alt etc would be descriptive keywords similar to our page titles etc (no overloading keywords or any of that) <div id="writer" style="width:100px;height:50px;> <h1><strong style="float:left;text-indent:-9999px;overflow:hidden;margin:0;padding:0;">articles on x,y,z</strong> <a href="http://www.site.com/link-to-author" title="site description"> <img style="border:none" src="http://www.site.com/images/badge.png" alt="description of articles" title="View my published work on site.com"/> </a> </h1></div>

    Read the article

  • How do I reset a lost password (using recovery mode requires me to type the password)?

    - by user16441
    I need to reset my password. I have followed these steps: How do I reset a lost Administrative(root) password? However, then I go to "root" or "netroot" recovery options, it tells me: Give root password for maintenance (or type Control-D to continue) Clearly, I do not know the root password. If I type Control-D, I return to the list of options. From this page I read: Under chapter 'The Other Way': 4. Highlight the line that begins kernel and press 'e' to edit But in the grub configuration file I have no line that starts with 'kernel'. Only: setparams 'Ubuntu...' recordfail set gxfpayload... insmod part_msdos insmod ext2 set root=... search --no-floppy... linux /boot/vmlinuz-2.6.38... initrd /boot/initrd.img-2.6.... Those are all lines in my grub. Which line should I edit? Or is there another way to reset my password?

    Read the article

  • Drupal views pane content not visible

    - by jwandborg
    I have a pane on my front page with one content pane and two views panes. I can't see the content of the third view ($pane->pid = "new-3" / comment: # Senaste bilder). Here's my panel <?php $page = new stdClass; $page->disabled = FALSE; /* Edit this to true to make a default page disabled initially */ $page->api_version = 1; $page->name = 'frontpage'; $page->task = 'page'; $page->admin_title = 'Startsida'; $page->admin_description = ''; $page->path = 'hem'; $page->access = array(); $page->menu = array(); $page->arguments = array(); $page->conf = array(); $page->default_handlers = array(); $handler = new stdClass; $handler->disabled = FALSE; /* Edit this to true to make a default handler disabled initially */ $handler->api_version = 1; $handler->name = 'page_frontpage_panel_context'; $handler->task = 'page'; $handler->subtask = 'frontpage'; $handler->handler = 'panel_context'; $handler->weight = 0; $handler->conf = array( 'title' => 'Panel', 'no_blocks' => FALSE, 'css_id' => '', 'css' => '', 'contexts' => array(), 'relationships' => array(), ); $display = new panels_display; $display->layout = 'onecol'; $display->layout_settings = array(); $display->panel_settings = array(); $display->cache = array(); $display->title = ''; $display->content = array(); $display->panels = array(); # Bild $pane = new stdClass; $pane->pid = 'new-1'; $pane->panel = 'middle'; $pane->type = 'custom'; $pane->subtype = 'custom'; $pane->shown = TRUE; $pane->access = array(); $pane->configuration = array( 'admin_title' => '', 'title' => '', 'body' => '<img src="/sites/all/themes/zen/ils-2010/img/graphics-start-text-v3.png" alt="Hej! Vi vet att du och dina klasskompisar har mycket att tänka på under er sista termin i gymnasiet. Därför har vi samlat några saker som vi tror kommer göra er studenttid lite roligare och lite enklare. Välkommen!" />', 'format' => '2', 'substitute' => TRUE, ); $pane->cache = array(); $pane->style = array(); $pane->css = array(); $pane->extras = array(); $pane->position = 0; $display->content['new-1'] = $pane; $display->panels['middle'][0] = 'new-1'; # Topplista $pane = new stdClass; $pane->pid = 'new-2'; $pane->panel = 'middle'; $pane->type = 'views_panes'; $pane->subtype = 'topplista_terms-panel_pane_1'; $pane->shown = TRUE; $pane->access = array(); $pane->configuration = array( 'link_to_view' => 1, 'more_link' => 0, 'use_pager' => 0, 'pager_id' => '', 'items_per_page' => '10', 'offset' => '0', 'path' => 'flaktavling/topplista/klasser', 'override_title' => 0, 'override_title_text' => '', ); $pane->cache = array(); $pane->style = array(); $pane->css = array(); $pane->extras = array(); $pane->position = 1; $display->content['new-2'] = $pane; $display->panels['middle'][1] = 'new-2'; # Senaste bilder $pane = new stdClass; $pane->pid = 'new-3'; $pane->panel = 'middle'; $pane->type = 'views_panes'; $pane->subtype = 'senaste_bilderna-panel_pane_1'; $pane->shown = TRUE; $pane->access = array(); $pane->configuration = array( 'link_to_view' => 0, 'more_link' => 0, 'use_pager' => 0, 'pager_id' => '', 'items_per_page' => '2', 'offset' => '0', 'path' => 'galleri/senaste-bilder', 'override_title' => 0, 'override_title_text' => '', ); $pane->cache = array(); $pane->style = array(); $pane->css = array( 'css_id' => 'pane-senaste-bilderna', 'css_class' => '', ); $pane->extras = array(); $pane->position = 2; $display->content['new-3'] = $pane; $display->panels['middle'][2] = 'new-3'; $display->hide_title = PANELS_TITLE_FIXED; $display->title_pane = 'new-1'; $handler->conf['display'] = $display; $page->default_handlers[$handler->name] = $handler; Here´s the view senaste_bilderna <?php $view = new view; $view->name = 'senaste_bilderna'; $view->description = ''; $view->tag = ''; $view->view_php = ''; $view->base_table = 'node'; $view->is_cacheable = FALSE; $view->api_version = 2; $view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */ $handler = $view->new_display('default', 'Förvalt', 'default'); $handler->override_option('fields', array( 'field_picture_fid' => array( 'id' => 'field_picture_fid', 'table' => 'node_data_field_picture', 'field' => 'field_picture_fid', ), )); $handler->override_option('sorts', array( 'created' => array( 'order' => 'DESC', 'granularity' => 'second', 'id' => 'created', 'table' => 'node', 'field' => 'created', 'relationship' => 'none', ), )); $handler->override_option('filters', array( 'type' => array( 'operator' => 'in', 'value' => array( 'ils_picture' => 'ils_picture', ), 'group' => '0', 'exposed' => FALSE, 'expose' => array( 'operator' => FALSE, 'label' => '', ), 'id' => 'type', 'table' => 'node', 'field' => 'type', 'override' => array( 'button' => 'Åsidosätt', ), 'relationship' => 'none', ), )); $handler->override_option('access', array( 'type' => 'none', )); $handler->override_option('cache', array( 'type' => 'none', )); $handler->override_option('title', 'Senaste bilderna från galleriet'); $handler->override_option('items_per_page', 2); $handler->override_option('row_options', array( 'inline' => array( 'field_picture_fid' => 'field_picture_fid', ), 'separator' => '', 'hide_empty' => 0, )); $handler = $view->new_display('panel_pane', 'Content pane', 'panel_pane_1'); $handler->override_option('pane_title', ''); $handler->override_option('pane_description', ''); $handler->override_option('pane_category', array( 'name' => 'View panes', 'weight' => 0, )); $handler->override_option('allow', array( 'use_pager' => FALSE, 'items_per_page' => FALSE, 'offset' => FALSE, 'link_to_view' => FALSE, 'more_link' => FALSE, 'path_override' => FALSE, 'title_override' => FALSE, 'exposed_form' => FALSE, )); $handler->override_option('argument_input', array()); $handler->override_option('link_to_view', 0); $handler->override_option('inherit_panels_path', 0); $handler = $view->new_display('page', 'Sida', 'page_1'); $handler->override_option('path', 'galleri/senaste-bilderna'); $handler->override_option('menu', array( 'type' => 'none', 'title' => '', 'description' => '', 'weight' => 0, 'name' => 'navigation', )); $handler->override_option('tab_options', array( 'type' => 'none', 'title' => '', 'description' => '', 'weight' => 0, )); I have edited one views template, here's the code in the file views-view-fields--senaste-bilderna.tpl.php <?php // $Id: views-view-fields.tpl.php,v 1.6 2008/09/24 22:48:21 merlinofchaos Exp $ /** * @file views-view-fields.tpl.php * Default simple view template to all the fields as a row. * * - $view: The view in use. * - $fields: an array of $field objects. Each one contains: * - $field->content: The output of the field. * - $field->raw: The raw data for the field, if it exists. This is NOT output safe. * - $field->class: The safe class id to use. * - $field->handler: The Views field handler object controlling this field. Do not use * var_export to dump this object, as it can't handle the recursion. * - $field->inline: Whether or not the field should be inline. * - $field->inline_html: either div or span based on the above flag. * - $field->separator: an optional separator that may appear before a field. * - $row: The raw result object from the query, with all data it fetched. * * @ingroup views_templates */ ?> <?php foreach ($fields as $id => $field): ?> <?php $result = db_query('SELECT * FROM {files} WHERE fid = ' . $row->node_data_field_picture_field_picture_fid ); ?> <?php $data = db_fetch_object( $result ); ?> <div id="senaste-bilderna-first"><img src="<?= imagecache_create_url('senaste_bilderna_thumbnail', $data->filepath) ?>" alt="" /></div> <?php /* if (!empty($field->separator)): <?php print $field->separator; <?php endif; <<?php print $field->inline_html; class="views-field-<?php print $field->class; "> <?php if ($field->label): <label class="views-label-<?php print $field->class; "> <?php print $field->label; : </label> <?php endif; <?php // $field->element_type is either SPAN or DIV depending upon whether or not // the field is a 'block' element type or 'inline' element type. <<?php print $field->element_type; class="field-content"><?php print $field->content; </<?php print $field->element_type; > </<?php print $field->inline_html;> <?php*/ endforeach; ?> This is the result <div class="panel-separator"> </div> <div class="panel-pane pane-views-panes pane-senaste-bilderna-panel-pane-1" id="pane-senaste-bilderna"> <h2 class="pane-title">Senaste bilderna från galleriet </h2> <div class="pane-content"> <div class="view view-senaste-bilderna view-id-senaste_bilderna view-display-id-panel_pane_1 view-dom-id-2"> <div class="view-content"> <div class="views-row views-row-1 views-row-odd views-row-first"> </div> <div class="views-row views-row-2 views-row-even views-row-last"> </div> </div> </div> </div> </div> My Drupal version is 6.16

    Read the article

  • URGENT: IE 6/7/8 problem!- Right Column is not aligned and is pushed down.

    - by Kalpesh Vasta
    Hi Guys, I'm new to this but here goes. I have been developing this website http://www.panelmaster.co.uk and i have managed to solve the majority of design problems but one! If you take a look at the site in IE the right column seems to drop down and is not aligned with the right and centre column. This problem only occurs in IE as upon testing i found it was fine in firefox and safari. I have provided below the CSS for the website. I would appreciate if you guys can help me with the problem asap. Thanks in advance. :) ========================== body { margin: 0; padding: 0; line-height: 1.5em; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #666; background-image: url(images/templatemo_body_top.jpg); background-color: #90857c; background-repeat: repeat-x; background-position: top; text-align: left; } a:link, a:visited { color: #073475; text-decoration: none; font-weight: normal; } a:active, a:hover { color: #073475; text-decoration: underline; } h3 { color: #1e7da9; font-size: 16px; font-weight: bold; } h2 { color: #1e7da9; font-size: 16px; font-weight: bold; } h1 { color: #696969; font-size: 20px; font-weight: bold; } p { margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; border: none; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } .cleaner_h30 { clear: both; width:100%; height: 30px; } .cleaner_h40 { clear: both; width:100%; height: 40px; } .float_l { float: left; } .float_r { float: right; } .margin_r20 { margin-right: 20px; } templatemo_body_wrapper { width: 100%; background: url(images/templatemo_body_bottom.png) repeat-x bottom center; } templatemo_wrapper { width: 970px; padding: 0 10px; margin: 0 auto; background: url(images/templatemo_wrapper_top.jpg) no-repeat top center; } /* header */ templatemo_header { clear: both; width: 890px; height: 60px; padding: 20px 40px } templatemo_header #site_title { float: left; padding-top: 15px; } site_title a { font-size: 24px; color: #FFFFFF; font-weight: bold; text-decoration: none; } site_title a:hover { font-weight: bold; text-decoration: none; } site_title a span { display: block; margin-top: 5px; font-size: 14px; color: #fff; font-weight: bold; letter-spacing: 2px; } /* end of header */ /* menu */ templatemo_menu { clear: both; width: 970px; height: 80px; background: url(images/templatemo_menubar.png) no-repeat; } search_box { width: 990px; height: 35px; text-align: right; } search_box form { margin: 0; padding: 5px 40px; } search_box #input_field { height: 20px; width: 300px; color: #000000; font-size: 12px; font-variant: normal; line-height: normal; border: 1px solid #CCCCCC; background: #FFFFFF; } search_box #submit_btn { height: 24px; width: 100px; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; outline: none; color:#666666; border: 1px solid #CCCCCC; background: #FFFFFF; } templatemo_menu ul { width: 890px; height: 35px; margin: 0; padding: 7px 40px; list-style: none; } templatemo_menu ul li { padding: 0px; margin: 0px; display: inline; } templatemo_menu ul li a { float: left; display: block; margin-right: 40px; font-size: 13px; text-decoration: none; color: #fff; font-weight: normal; outline: none; } templatemo_menu ul li a:hover, #templatemo_menu ul .current { color: #162127; } /* end of menu */ /* contetnt */ templatemo_content_wrapper { clear: both; padding: 0px 0; } templatemo_content { float: left; margin-left: 10px; width: 550px; } banner { margin: 0 0 10px 0; } templatemo_content #content_top { width: 550px; height: 20px; background: url(images/templatemo_content_top.png) no-repeat; } templatemo_content #content_bottom { width: 550px; height: 20px; background: url(images/templatemo_content_bottom.png) no-repeat; } templatemo_content #content_middle { width: 510px; padding: 5px 20px 0px 20px; background: url(images/templatemo_content_middle.png) repeat-y; } content_middle p { text-align: justify; } .templatemo_sidebar_wrapper { width: 200px; } .templatemo_sidebar { width: 197px; padding-right: 3px; background: url(images/templatemo_sidebar_middle.png) repeat-y; } .templatemo_sidebar_top { width: 200px; height: 20px; background: url(images/templatemo_sidebar_top.png) no-repeat; } .templatemo_sidebar_bottom { width: 200px; height: 20px; background: url(images/templatemo_sidebar_bottom.png) no-repeat; } .templatemo_sidebar .sidebar_box { clear: both; padding-bottom: 20px; } .sidebar_box1 { padding: 15px; } .sidebar_box h2 { color: #2d84ad; font-size: 16px; padding-left: 25px; font-weight: bold; margin: 0 0 10px 10px; background: url(images/templatemo_sidebar_h1.jpg) left center no-repeat; } .sidebar_box .sidebar_box_content { padding: 15px; background: url(images/templatemo_sidebar_box_top.png) top repeat-x; } .sidebar_box img { border: 1px solid #999; margin-bottom: 5px; } .sidebar_box .discount { margin: 5px 0 0 0; font-weight: bold; } .sidebar_box .discount span { color: #C00; } .left_sidebar_box .discount a { font-weight: bold; color: #000; } .sidebar_box .categories_list { margin: 0; padding: 0; list-style: none; } .categories_list li { padding: 0; margin: 0; } .categories_list li a { display: block; color: #201f1c; padding: 5px 0 5px 20px; background: url(images/list.png) center left no-repeat; } .categories_list li a:hover { color: #439ac3; text-decoration: none; } .news_box { clear: both; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #999; } .news_box h4 { padding: 2px 0; margin: 0; } .news_box h4 a { font-size: 12px; font-weight: normal; color: #1893f2; } newsletter_box label { display: block; margin-bottom: 10px; } newsletter_box .input_field { height: 20px; width: 155px; padding: 0 5px; margin-bottom: 10px; color: #000000; font-size: 12px; font-variant: normal; line-height: normal; } newsletter_box .submit_btn { float: right; height: 30px; width: 80px; margin: 0px; padding: 3px 0 15px 0; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; outline: none; } .product_box { float: left; width: 223px; padding: 10px; margin-bottom: 20px; border: 1px solid #CCC; text-align: center; } .product_box img { margin-bottom: 10px; } .product_box h3 { color: #2a2522; font-size: 12px; margin: 0 0 10px; } .product_box p { margin-bottom: 10px; } .product_box p span { color: #cf5902; font-size: 14px; font-weight: bold; } .product_box .detail { float: right; } .product_box .addtocard { float: left; font-weight: bold; padding-right: 20px; background: url(images/templatemo_shopping_cart.png) bottom right no-repeat; } /* end of content */ /* footer */ templatemo_footer_wrapper { background: url(images/templatemo_footer.png) repeat-x; } templatemo_footer { width: 910px; height: 85px; padding: 50px 40px 30px 40px; margin: 0 auto; text-align: center; color: #a9a098; } templatemo_footer a { color: #d7d1cc; font-weight: normal; } templatemo_footer a:hover { text-decoration: none; color: #FFFF33; } templatemo_footer .footer_menu { margin: 0 0 30px 0; padding: 0px; list-style: none; } .footer_menu li { margin: 0px; padding: 0 20px; display: inline; border-right: 1px solid #d7d1cc; } .footer_menu li a { color: #d7d1cc; } .footer_menu .last_menu { border: none; } /* end of footer */ /twitter/ twitter_div {border-top: 0px;} twitter_div a {color: #0000ff !important;} twitter_update_list {margin-left: -1em !important; margin-bottom: 0px !important;} twitter_update_list li {list-style-type: none; padding-right: 5px; } twitter_update_list li a {color: #0000ff; padding-right: 5px;} twitter_div {border-bottom: 0px; padding-bottom: 10px; padding-top:6px; padding-right: 5px;} twitter_div a, #twitter_update_list li a {text-decoration: none !important;} twitter_div a:hover, #twitter_update_list li a:hover {text-decoration:underline !important;}

    Read the article

  • convert arabic html to pdf

    - by Mariam
    <div> <table border="1" width="500px"> <tr> <td colspan="2"> aspdotnetcodebook ????? ???????</td> </tr> <tr> <td> cell1 </td> <td> cell2 </td> </tr> <tr> <td colspan="2"> <asp:Label ID="lblLabel" runat="server" Text=""></asp:Label> <img alt="" src="logo.gif" style="width: 174px; height: 40px" /></td> </tr> <tr> <td colspan="2" dir="rtl"> <h1> <img alt="" height="168" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" style="margin-left: 10px; margin-right: 10px; float: left;" width="120" />????? ????? ??? ??? ?? ?? ??</h1> <p> ?????? ??????? ??????? ???? ?????? ????? ??????? ?????? ???? ?????? ?????? ??????? ????????. ???????? ??? ??????? ??????? ????? ?????? ??????? ?? ??????? ??? ?????? ????? ????? ?????? ????? ???????? ?? ????? ????? ???? ????? ?? ????? ?????? ??????? ??????? ????? ??????? ?????????. <a href="http://en.wikipedia.org/wiki/Brothers_Grimm"> ??????? ????/a> ?????? ??????? ??????? ???? ?????? ????? ??????? ?????? ???? ?????? ?????? ??????? ????????. ???????? ??? ??????? ??????? ????? ?????? ??????? ?? ??????? ??? ?????? ????? ????? ?????? ????? ???????? ?? ????? ????? ???? ????? ?? ????? ?????? ??????? ??????? ????? ??????? ?????????. <a href="http://en.wikipedia.org/wiki/Hood_(headgear%2529" title="Hood (headgear)">?</a><a href="http://en.wikipedia.org/wiki/Hood_(headgear%2529">?????</a> <a href="http://en.wikipedia.org/wiki/Cape" title="Cape">?</a><a href="http://en.wikipedia.org/wiki/Cape">??</a> ?? <a href="http://en.wikipedia.org/wiki/Cloak" title="?????????">?????????</a> ?????? ??????? ??????? ???? ?????? ????? ??????? ?????? ???? ?????? ?????? ??????? ????????. ???????? ??? ??????? ??????? ????? ?????? ??????? ?? ??????? ??? ?????? ????? ????? ?????? ????? ???????? ?? ????? ????? ???? ????? ?? ????? ?????? ??????? ??????? ????? ??????? ?????????. .</p> <p> ?????? ??????? ??????? ???? ?????? ????? ??????? ?????? ???? ?????? ?????? ??????? ????????. ???????? ??? ??????? ??????? ????? ?????? ??????? ?? ??????? ??? ?????? ????? ????? ?????? ????? ???????? ?? ????? ????? ???? ????? ?? ????? ?????? ??????? ??????? ????? ??????? ?????????.</p> <p> ?????? ??????? ??????? ???? ?????? ????? ??????? ?????? ???? ?????? ?????? ??????? ????????. ???????? ??? ??????? ??????? ????? ?????? ??????? ?? ??????? ??? ?????? ????? ????? ?????? ????? ???????? ?? ????? ????? ???? ????? ?? ????? ?????? ??????? ??????? ????? ??????? ?????????.</p> <p> ?????? ??????? ??????? ???? ?????? ????? ??????? ?????? ???? ?????? ?????? ??????? ????????. ???????? ??? ??????? ??????? ????? ?????? ??????? ?? ??????? ??? ?????? ????? ????? ?????? ????? ???????? ?? ????? ????? ???? ????? ?? ????? ?????? ??????? ??????? ????? ??????? ?????????. <a href="http://en.wikipedia.org/wiki/Hunter">??????</a>, ?????? ??????? ??????? ???? ?????? ????? ??????? ?????? ???? ?????? ?????? ??????? ????????. ???????? ??? ??????? ??????? ????? ?????? ??????? ?? ??????? ??? ?????? ????? ????? ?????? ????? ???????? ?? ????? ????? ???? ????? ?? ????? ?????? ??????? ??????? ????? ??????? ?????????. ??????? ??????? ???? ?????? ????? ??????? ?????? ???? ?????? ?????? ??????? ????????. ???????? ??? ??????? ??????? ????? ?????? ??????? ?? ??????? ??? ?????? ????? ????? ?????? ????? ???????? ?? ????? ????? ???? ????? ?? ????? ?????? ??????? ??????? ????? ??????? ?????????.</p> <p> ?????? ??????? ??????? ???? ?????? ????? ??????? ?????? ???? ?????? ?????? ??????? ????????. ???????? ??? ??????? ??????? ????? ?????? ??????? ?? ??????? ??? ?????? ????? ????? ?????? ????? ???????? ?? ????? ????? ???? ????? ?? ????? ?????? ??????? ??????? ????? ??????? ?????????. <a href="http://en.wikipedia.org/wiki/Enchanted_forest">??????</a>, ?????? ??????? ??????? ???? ?????? ????? ??????? ?????? ???? ?????? ?????? ??????? ????????. ???????? ??? ??????? ??????? ????? ?????? ??????? ?? ??????? ??? ?????? ????? ????? ?????? ????? ???????? ?? ????? ????? ???? ????? ?? ????? ?????? ??????? ??????? ????? ??????? ?????????. </p> </td> </tr> </table> </div> i use itextsharp to convert this content which is stored in DB to pdf file to be downloaded to the user i cant achieve this

    Read the article

  • Syntax error, unexpected '}' wordpress error

    - by Zach Johnson
    Hello I am not a PHP programmer so I have no idea what the problem is here. Basiclly I am trying to use a wordpress theme but I get this error The Parse error: syntax error, unexpected '}' in / home/a5618915/public_html/photo/wp-content/themes/iphoto/functions.php on line 1 I have no Idea what exactly is wrong in the php file. The code for the functions.php is below. If someone could point out whats wrong I would be really grateful. <?php define('THEME_NAME','iphoto'); load_theme_textdomain( THEME_NAME,TEMPLATEPATH .'/languages'); add_custom_background(); add_theme_support( 'automatic-feed-links' ); add_theme_support( 'post-formats', array( 'video')); if ( function_exists('register_nav_menus') ) { register_nav_menus(array('primary' => 'header')); } add_action('wp_ajax_b_ajax_post_action', 'b_ajax_callback'); function b_ajax_callback() { global $wpdb; if(isset($_POST['type']) && $_POST['type'] == 'upload') { $clickedID = $_POST['data']; $filename = $_FILES[$clickedID]; $filename['name'] = preg_replace('/[^a-zA-Z0-9._-]/', '', $filename['name']); $override['test_form'] = false; $override['action'] = 'wp_handle_upload'; $uploaded_file = wp_handle_upload($filename,$override); $upload_tracking[] = $clickedID; update_option($clickedID, $uploaded_file['url'] ); if(!empty($uploaded_file['error'])) {echo 'Upload Error: ' . $uploaded_file['error']; } else { echo $uploaded_file['url']; } } die(); } function post_thumbnail($a){ global $post; $post_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/\<img.+?src="(.+?)".*?\/>/is',$post->post_content,$matches ,PREG_SET_ORDER); $cnt = count( $matches ); if($a==1){ if($cnt>0){ if($cnt>1){ if($cnt>3) $cnt=3; for($i=0;$i<$cnt;$i++){ $post_current = $i+1; $post_img_src = $matches[$i][1]; if($i==0){$post_spans .= '<span class="current">'.$post_current.'</span>';}else{ $post_spans .= '<span>'.$post_current.'</span>'; } $post_imgs .='<img src="'.get_bloginfo('template_url').'/timthumb.php?src='.$post_img_src.'&amp;w=285&amp;zc=1" />'; } $post_img = $post_imgs.'<span class="imgNav">'.$post_spans.'</span>'; }else{ $post_img_src = $matches [0][1]; $post_img = '<img src="'.get_bloginfo('template_url').'/timthumb.php?src='.$post_img_src.'&amp;w=285&amp;zc=1" />'; } echo $post_img; } }else{ return $cnt; } } function post_content_thumbnail($c) { if(is_single()){ $c = preg_replace('/\width="*".+?height="*"/i', '', $c); $s = array('/src="(.+?.(jpg|bmp|png|jepg|gif))".+?/i' => 'src="'.get_bloginfo("template_url").'/timthumb.php?src=$1&amp;h=440&amp;zc=1"'); foreach($s as $p => $r){ $c = preg_replace($p,$r,$c); } return $c; } } add_filter( 'the_content', 'post_content_thumbnail' ); function ajax_post(){ if( isset($_GET['action'])&& $_GET['action'] == 'ajax_post'){ if(isset($_GET['cat'])){ $args = array( 'category_name' => $_GET['cat'], 'paged' => $_GET['pag'] ); }else if(isset($_GET['pag'])){ $args = array( 'paged' => $_GET['pag'] ); } query_posts($args); if(have_posts()){while (have_posts()):the_post();?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile;} die(); }else{return;} } add_action('init', 'ajax_post'); function pagenavi( $p = 2 ) { if ( is_singular() ) return; global $wp_query,$paged; $max_page = $wp_query->max_num_pages; if ( $max_page == 1 ){ echo '<span id="post-current">1</span> / <span id="post-count">1</span>'; return; } if ( empty( $paged ) ) $paged = 1; if ( $paged >1 ) echo "<a id='prev' title='Prev' href='",esc_html( get_pagenum_link( $paged -1 ) ),"'>&lt;&lt;</a> "; echo '<span id="post-current">'.$paged .'</span> / <span id="post-count">'.$max_page .'</span>'; if ( $paged <$max_page ) echo "<a id='next' title='Next' href='",esc_html( get_pagenum_link( $paged +1) ),"'>&gt;&gt;</a> "; } function iphoto_comment($comment,$args,$depth) { $GLOBALS['comment'] = $comment; ;echo ' <li ';comment_class();;echo ' id="li-comment-';comment_ID() ;echo '" > <div id="comment-';comment_ID();;echo '" class="comment-body"> <div class="commentmeta">';echo get_avatar( $comment->comment_author_email,$size = '48');;echo '</div> ';if ($comment->comment_approved == '0') : ;echo ' <em>';_e('Your comment is awaiting moderation.') ;echo '</em><br /> ';endif;;echo ' <div class="commentmetadata">&nbsp;-&nbsp;';printf(__('%1$s %2$s'),get_comment_date('Y.n.d'),get_comment_time('G:i'));;echo '</div> <div class="reply">';comment_reply_link(array_merge( $args,array('depth'=>$depth,'max_depth'=>$args['max_depth'],'reply_text'=>__('Reply')))) ;echo '</div> <div class="vcard">';printf(__('%s'),get_comment_author_link()) ;echo '</div> ';comment_text() ;echo ' </div> '; } add_action('admin_init', 'iphoto_init'); function iphoto_init() { if (isset($_GET['page']) && $_GET['page'] == 'functions.php') { $dir = get_bloginfo('template_directory'); wp_enqueue_script('adminjquery', $dir . '/includes/admin.js', false, '1.0.0', false); wp_enqueue_style('admincss', $dir . '/includes/admin.css', false, '1.0.0', 'screen'); } } add_action('admin_menu','iphoto_page'); function iphoto_page (){ if ( count($_POST) >0 &&isset($_POST['iphoto_settings']) ){ $options = array ('keywords','description','analytics','lib','views','noajax','animate','phzoom','copyright'); foreach ( $options as $opt ){ delete_option ( 'iphoto_'.$opt,$_POST[$opt] ); add_option ( 'iphoto_'.$opt,$_POST[$opt] ); } } add_theme_page('iPhoto '.__('Theme Options',THEME_NAME),__('Theme Options',THEME_NAME),'edit_themes',basename(__FILE__),'iphoto_settings'); } function iphoto_settings(){?> <div class="wrap"> <div> <h2><?php _e( 'iPhoto Theme Options<span>Version: ',THEME_NAME);?><?php $theme_data=get_theme_data(TEMPLATEPATH . '/style.css'); echo $theme_data['Version'];?></span></h2> </div> <div class="clear"></div> <form method="post" action=""> <div id="theme-Option"> <div id="theme-menu"> <span class="m1"><?php _e( 'jQuery Effect',THEME_NAME);?></span> <span class="m2"><?php _e( 'Relative Plugins',THEME_NAME);?></span> <span class="m3"><?php _e( 'Website Information',THEME_NAME);?></span> <span class="m4"><?php _e( 'Analytics Code',THEME_NAME);?></span> <span class="m5"><?php _e( 'Footer Copyright',THEME_NAME);?></span> <span class="m6"><?php _e( 'iPhoto Theme Declare',THEME_NAME);?></span> <div class="clear"></div> </div> <div id="theme-content"> <ul> <li> <tr><td> <em><?php _e( 'iPhoto use jquery 1.4.4 which contained in this theme, you can also use the Google one instead.',THEME_NAME);?></em><br/> <label><input name="lib" type="checkbox" id="lib" value="1" <?php if (get_option('iphoto_lib')!='') echo 'checked="checked"' ;?>/><?php _e( 'Load the jQuery Library supported by Google',THEME_NAME);?></label><br/><br/> </td></tr> <tr><td> <em><?php _e( 'Index page infinite loading posts.',THEME_NAME);?></em><br/> <label><input name="noajax" type="checkbox" id="noajax" value="1" <?php if (get_option('iphoto_noajax')!='') echo 'checked="checked"' ;?>/><?php _e( 'Deactivate the Infinite loading posts',THEME_NAME);?></label><br/><br/> </td></tr> <tr><td> <em><?php _e( '<strong>Animation of relayout elements</strong>',THEME_NAME);?></em><br /> <input name="animate" type="checkbox" id="animate" value="1" <?php if (get_option('iphoto_animate')!='') echo 'checked="checked"';?>/><?php _e( 'Deactivate animation effect on index page',THEME_NAME);?> </td></tr> </li> <li> <tr><td> <em><?php _e( 'WP-PostViews, Enables you to display how many times a post/page had been viewed.',THEME_NAME);?></em><br/> <label><input name="views" type="checkbox" id="views" value="1" <?php if (get_option('iphoto_views')!='') echo 'checked="checked"' ?>/><?php _e( 'Activate WP-PostViews',THEME_NAME);?></label><br/><br/> </td></tr> </li> <li> <tr><td> <?php _e( '<em>Keywords, separate by English commas. like MuFeng, Computer, Software</em>',THEME_NAME);?><br/> <textarea name="keywords" id="keywords" rows="1" cols="70" style="font-size:11px;width:100%;"><?php echo get_option('iphoto_keywords');?></textarea><br/> </td></tr> <tr><td> <?php _e( '<em>Description, explain what\'s this site about. like MuFeng, Breathing the wind</em>',THEME_NAME);?><br/> <textarea name="description" id="description" rows="3" cols="70" style="font-size:11px;width:100%;"><?php echo get_option('iphoto_description');?></textarea> </td></tr> </li> <li> <tr><td> <?php _e( 'You can get your Google Analytics code <a target="_blank" href="https://www.google.com/analytics/settings/check_status_profile_handler">here</a>.',THEME_NAME);?></label><br> <textarea name="analytics" id="analytics" rows="5" cols="70" style="font-size:11px;width:100%;"><?php echo stripslashes(get_option('iphoto_analytics'));?></textarea> </td></tr> </li> <li> <tr><td> <textarea name="copyright" id="copyright" rows="5" cols="70" style="font-size:11px;width:100%;"><?php if(stripslashes(get_option('iphoto_copyright'))!=''){echo stripslashes(get_option('iphoto_copyright'));}else{echo 'Copyright &copy; '.date('Y').' '.'<a href="'.home_url( '/').'" title="'.esc_attr( get_bloginfo( 'name') ).'">'.esc_attr( get_bloginfo( 'name') ).'</a> All rights reserved'; };?></textarea> <br/><em><?php _e( '<b>Preview</b>',THEME_NAME);?><span> : </span><span><?php if(stripslashes(get_option('iphoto_copyright'))!=''){echo stripslashes(get_option('iphoto_copyright'));}else{echo 'Copyright &copy; '.date('Y').' '.'<a href="'.home_url( '/').'" title="'.esc_attr( get_bloginfo( 'name') ).'">'.esc_attr( get_bloginfo( 'name') ).'</a> All rights reserved'; };?></span></em> </td></tr> </li> <li> <tr><td> <p><?php _e('iPhoto is created, developed and maintained by <a href="http://mufeng.me/">MuFeng</a>. If you like iPhoto, please donate. It will help in developing new features and versions.',THEME_NAME);?><?php _e('Alipay',THEME_NAME);?>:</strong> <a href="http://www.alipay.com" target="_blank" title="Alipay">[email protected]</a></p> <h3 style="color:#333" id="introduce"><?php _e( 'Introduction',THEME_NAME);?></h3> <p style="text-indent: 2em;margin:10px 0;"><?php _e( 'iPhoto is evolved from one theme of Tumblr and turned it into a photo theme which can be used at wordpress.',THEME_NAME);?></p> <h3 style="color:#333"><?php _e( 'Published Address',THEME_NAME);?></h3> <p id="release" style="text-indent: 2em;margin:10px 0;"><a href="http://mufeng.me/wordpress-theme-iphoto.html" target="_blank">http://mufeng.me/wordpress-theme-iphoto.html</a></p> <h3 style="color:#333"><?php _e( 'Preview Address',THEME_NAME);?></h3> <p id="preview" style="text-indent: 2em;margin:10px 0;"><a href="http://mufeng.me/photo/" target="_blank">http://mufeng.me/photo/</a></p> <h3 style="color:#333" id="bug"><?php _e( 'Report Bugs',THEME_NAME);?></h3> <p style="text-indent: 2em;margin:10px 0;"><?php _e( 'Weibo <a href="http://weibo.com/meapo" target="_blank">@mufeng.me</a> or leave a message at <a href="http://mufeng.me" target="_blank">http://mufeng.me</a>?',THEME_NAME);?></p> </td></tr> </li> </ul> </div> </div> <p class="submit"> <input type="submit" name="Submit" class="button-primary" value="<?php _e( 'Save Options',THEME_NAME);?>" /> <input type="hidden" name="iphoto_settings" value="save" style="display:none;" /> </p> </form> </div> <?php } ?>

    Read the article

  • Right Hand Column Does Not Align Properly in IE6/7/8

    - by Kalpesh Vasta
    Hi Guys, I'm new to this but here goes. I have been developing this website http://www.panelmaster.co.uk and i have managed to solve the majority of design problems but one! If you take a look at the site in IE the right column seems to drop down and is not aligned with the right and centre column. This problem only occurs in IE as upon testing i found it was fine in firefox and safari. I have provided below the CSS for the website. I would appreciate if you guys can help me with the problem. Thanks in advance. :) ========================== body { margin: 0; padding: 0; line-height: 1.5em; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #666; background-image: url(images/templatemo_body_top.jpg); background-color: #90857c; background-repeat: repeat-x; background-position: top; text-align: left; } a:link, a:visited { color: #073475; text-decoration: none; font-weight: normal; } a:active, a:hover { color: #073475; text-decoration: underline; } h3 { color: #1e7da9; font-size: 16px; font-weight: bold; } h2 { color: #1e7da9; font-size: 16px; font-weight: bold; } h1 { color: #696969; font-size: 20px; font-weight: bold; } p { margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; border: none; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } .cleaner_h30 { clear: both; width:100%; height: 30px; } .cleaner_h40 { clear: both; width:100%; height: 40px; } .float_l { float: left; } .float_r { float: right; } .margin_r20 { margin-right: 20px; } #templatemo_body_wrapper { width: 100%; background: url(images/templatemo_body_bottom.png) repeat-x bottom center; } #templatemo_wrapper { width: 970px; padding: 0 10px; margin: 0 auto; background: url(images/templatemo_wrapper_top.jpg) no-repeat top center; } /* header */ #templatemo_header { clear: both; width: 890px; height: 60px; padding: 20px 40px } #templatemo_header #site_title { float: left; padding-top: 15px; } #site_title a { font-size: 24px; color: #FFFFFF; font-weight: bold; text-decoration: none; } #site_title a:hover { font-weight: bold; text-decoration: none; } #site_title a span { display: block; margin-top: 5px; font-size: 14px; color: #fff; font-weight: bold; letter-spacing: 2px; } /* end of header */ /* menu */ #templatemo_menu { clear: both; width: 970px; height: 80px; background: url(images/templatemo_menubar.png) no-repeat; } #search_box { width: 990px; height: 35px; text-align: right; } #search_box form { margin: 0; padding: 5px 40px; } #search_box #input_field { height: 20px; width: 300px; color: #000000; font-size: 12px; font-variant: normal; line-height: normal; border: 1px solid #CCCCCC; background: #FFFFFF; } #search_box #submit_btn { height: 24px; width: 100px; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; outline: none; color:#666666; border: 1px solid #CCCCCC; background: #FFFFFF; } #templatemo_menu ul { width: 890px; height: 35px; margin: 0; padding: 7px 40px; list-style: none; } #templatemo_menu ul li { padding: 0px; margin: 0px; display: inline; } #templatemo_menu ul li a { float: left; display: block; margin-right: 40px; font-size: 13px; text-decoration: none; color: #fff; font-weight: normal; outline: none; } #templatemo_menu ul li a:hover, #templatemo_menu ul .current { color: #162127; } /* end of menu */ /* contetnt */ #templatemo_content_wrapper { clear: both; padding: 0px 0; } #templatemo_content { float: left; margin-left: 10px; width: 550px; } #banner { margin: 0 0 10px 0; } #templatemo_content #content_top { width: 550px; height: 20px; background: url(images/templatemo_content_top.png) no-repeat; } #templatemo_content #content_bottom { width: 550px; height: 20px; background: url(images/templatemo_content_bottom.png) no-repeat; } #templatemo_content #content_middle { width: 510px; padding: 5px 20px 0px 20px; background: url(images/templatemo_content_middle.png) repeat-y; } #content_middle p { text-align: justify; } .templatemo_sidebar_wrapper { width: 200px; } .templatemo_sidebar { width: 197px; padding-right: 3px; background: url(images/templatemo_sidebar_middle.png) repeat-y; } .templatemo_sidebar_top { width: 200px; height: 20px; background: url(images/templatemo_sidebar_top.png) no-repeat; } .templatemo_sidebar_bottom { width: 200px; height: 20px; background: url(images/templatemo_sidebar_bottom.png) no-repeat; } .templatemo_sidebar .sidebar_box { clear: both; padding-bottom: 20px; } .sidebar_box1 { padding: 15px; } .sidebar_box h2 { color: #2d84ad; font-size: 16px; padding-left: 25px; font-weight: bold; margin: 0 0 10px 10px; background: url(images/templatemo_sidebar_h1.jpg) left center no-repeat; } .sidebar_box .sidebar_box_content { padding: 15px; background: url(images/templatemo_sidebar_box_top.png) top repeat-x; } .sidebar_box img { border: 1px solid #999; margin-bottom: 5px; } .sidebar_box .discount { margin: 5px 0 0 0; font-weight: bold; } .sidebar_box .discount span { color: #C00; } .left_sidebar_box .discount a { font-weight: bold; color: #000; } .sidebar_box .categories_list { margin: 0; padding: 0; list-style: none; } .categories_list li { padding: 0; margin: 0; } .categories_list li a { display: block; color: #201f1c; padding: 5px 0 5px 20px; background: url(images/list.png) center left no-repeat; } .categories_list li a:hover { color: #439ac3; text-decoration: none; } .news_box { clear: both; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #999; } .news_box h4 { padding: 2px 0; margin: 0; } .news_box h4 a { font-size: 12px; font-weight: normal; color: #1893f2; } #newsletter_box label { display: block; margin-bottom: 10px; } #newsletter_box .input_field { height: 20px; width: 155px; padding: 0 5px; margin-bottom: 10px; color: #000000; font-size: 12px; font-variant: normal; line-height: normal; } #newsletter_box .submit_btn { float: right; height: 30px; width: 80px; margin: 0px; padding: 3px 0 15px 0; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; outline: none; } .product_box { float: left; width: 223px; padding: 10px; margin-bottom: 20px; border: 1px solid #CCC; text-align: center; } .product_box img { margin-bottom: 10px; } .product_box h3 { color: #2a2522; font-size: 12px; margin: 0 0 10px; } .product_box p { margin-bottom: 10px; } .product_box p span { color: #cf5902; font-size: 14px; font-weight: bold; } .product_box .detail { float: right; } .product_box .addtocard { float: left; font-weight: bold; padding-right: 20px; background: url(images/templatemo_shopping_cart.png) bottom right no-repeat; } /* end of content */ /* footer */ #templatemo_footer_wrapper { background: url(images/templatemo_footer.png) repeat-x; } #templatemo_footer { width: 910px; height: 85px; padding: 50px 40px 30px 40px; margin: 0 auto; text-align: center; color: #a9a098; } #templatemo_footer a { color: #d7d1cc; font-weight: normal; } #templatemo_footer a:hover { text-decoration: none; color: #FFFF33; } #templatemo_footer .footer_menu { margin: 0 0 30px 0; padding: 0px; list-style: none; } .footer_menu li { margin: 0px; padding: 0 20px; display: inline; border-right: 1px solid #d7d1cc; } .footer_menu li a { color: #d7d1cc; } .footer_menu .last_menu { border: none; } /* end of footer */ /*twitter*/ #twitter_div {border-top: 0px;} #twitter_div a {color: #0000ff !important;} #twitter_update_list {margin-left: -1em !important; margin-bottom: 0px !important;} #twitter_update_list li {list-style-type: none; padding-right: 5px; } #twitter_update_list li a {color: #0000ff; padding-right: 5px;} #twitter_div {border-bottom: 0px; padding-bottom: 10px; padding-top:6px; padding-right: 5px;} #twitter_div a, #twitter_update_list li a {text-decoration: none !important;} #twitter_div a:hover, #twitter_update_list li a:hover {text-decoration:underline !important;}

    Read the article

  • .NET HTML Sanitation for rich HTML Input

    - by Rick Strahl
    Recently I was working on updating a legacy application to MVC 4 that included free form text input. When I set up the new site my initial approach was to not allow any rich HTML input, only simple text formatting that would respect a few simple HTML commands for bold, lists etc. and automatically handles line break processing for new lines and paragraphs. This is typical for what I do with most multi-line text input in my apps and it works very well with very little development effort involved. Then the client sprung another note: Oh by the way we have a bunch of customers (real estate agents) who need to post complete HTML documents. Oh uh! There goes the simple theory. After some discussion and pleading on my part (<snicker>) to try and avoid this type of raw HTML input because of potential XSS issues, the client decided to go ahead and allow raw HTML input anyway. There has been lots of discussions on this subject on StackOverFlow (and here and here) but to after reading through some of the solutions I didn't really find anything that would work even closely for what I needed. Specifically we need to be able to allow just about any HTML markup, with the exception of script code. Remote CSS and Images need to be loaded, links need to work and so. While the 'legit' HTML posted by these agents is basic in nature it does span most of the full gamut of HTML (4). Most of the solutions XSS prevention/sanitizer solutions I found were way to aggressive and rendered the posted output unusable mostly because they tend to strip any externally loaded content. In short I needed a custom solution. I thought the best solution to this would be to use an HTML parser - in this case the Html Agility Pack - and then to run through all the HTML markup provided and remove any of the blacklisted tags and a number of attributes that are prone to JavaScript injection. There's much discussion on whether to use blacklists vs. whitelists in the discussions mentioned above, but I found that whitelists can make sense in simple scenarios where you might allow manual HTML input, but when you need to allow a larger array of HTML functionality a blacklist is probably easier to manage as the vast majority of elements and attributes could be allowed. Also white listing gets a bit more complex with HTML5 and the new proliferation of new HTML tags and most new tags generally don't affect XSS issues directly. Pure whitelisting based on elements and attributes also doesn't capture many edge cases (see some of the XSS cheat sheets listed below) so even with a white list, custom logic is still required to handle many of those edge cases. The Microsoft Web Protection Library (AntiXSS) My first thought was to check out the Microsoft AntiXSS library. Microsoft has an HTML Encoding and Sanitation library in the Microsoft Web Protection Library (formerly AntiXSS Library) on CodePlex, which provides stricter functions for whitelist encoding and sanitation. Initially I thought the Sanitation class and its static members would do the trick for me,but I found that this library is way too restrictive for my needs. Specifically the Sanitation class strips out images and links which rendered the full HTML from our real estate clients completely useless. I didn't spend much time with it, but apparently I'm not alone if feeling this library is not really useful without some way to configure operation. To give you an example of what didn't work for me with the library here's a small and simple HTML fragment that includes script, img and anchor tags. I would expect the script to be stripped and everything else to be left intact. Here's the original HTML:var value = "<b>Here</b> <script>alert('hello')</script> we go. Visit the " + "<a href='http://west-wind.com'>West Wind</a> site. " + "<img src='http://west-wind.com/images/new.gif' /> " ; and the code to sanitize it with the AntiXSS Sanitize class:@Html.Raw(Microsoft.Security.Application.Sanitizer.GetSafeHtmlFragment(value)) This produced a not so useful sanitized string: Here we go. Visit the <a>West Wind</a> site. While it removed the <script> tag (good) it also removed the href from the link and the image tag altogether (bad). In some situations this might be useful, but for most tasks I doubt this is the desired behavior. While links can contain javascript: references and images can 'broadcast' information to a server, without configuration to tell the library what to restrict this becomes useless to me. I couldn't find any way to customize the white list, nor is there code available in this 'open source' library on CodePlex. Using Html Agility Pack for HTML Parsing The WPL library wasn't going to cut it. After doing a bit of research I decided the best approach for a custom solution would be to use an HTML parser and inspect the HTML fragment/document I'm trying to import. I've used the HTML Agility Pack before for a number of apps where I needed an HTML parser without requiring an instance of a full browser like the Internet Explorer Application object which is inadequate in Web apps. In case you haven't checked out the Html Agility Pack before, it's a powerful HTML parser library that you can use from your .NET code. It provides a simple, parsable HTML DOM model to full HTML documents or HTML fragments that let you walk through each of the elements in your document. If you've used the HTML or XML DOM in a browser before you'll feel right at home with the Agility Pack. Blacklist based HTML Parsing to strip XSS Code For my purposes of HTML sanitation, the process involved is to walk the HTML document one element at a time and then check each element and attribute against a blacklist. There's quite a bit of argument of what's better: A whitelist of allowed items or a blacklist of denied items. While whitelists tend to be more secure, they also require a lot more configuration. In the case of HTML5 a whitelist could be very extensive. For what I need, I only want to ensure that no JavaScript is executed, so a blacklist includes the obvious <script> tag plus any tag that allows loading of external content including <iframe>, <object>, <embed> and <link> etc. <form>  is also excluded to avoid posting content to a different location. I also disallow <head> and <meta> tags in particular for my case, since I'm only allowing posting of HTML fragments. There is also some internal logic to exclude some attributes or attributes that include references to JavaScript or CSS expressions. The default tag blacklist reflects my use case, but is customizable and can be added to. Here's my HtmlSanitizer implementation:using System.Collections.Generic; using System.IO; using System.Xml; using HtmlAgilityPack; namespace Westwind.Web.Utilities { public class HtmlSanitizer { public HashSet<string> BlackList = new HashSet<string>() { { "script" }, { "iframe" }, { "form" }, { "object" }, { "embed" }, { "link" }, { "head" }, { "meta" } }; /// <summary> /// Cleans up an HTML string and removes HTML tags in blacklist /// </summary> /// <param name="html"></param> /// <returns></returns> public static string SanitizeHtml(string html, params string[] blackList) { var sanitizer = new HtmlSanitizer(); if (blackList != null && blackList.Length > 0) { sanitizer.BlackList.Clear(); foreach (string item in blackList) sanitizer.BlackList.Add(item); } return sanitizer.Sanitize(html); } /// <summary> /// Cleans up an HTML string by removing elements /// on the blacklist and all elements that start /// with onXXX . /// </summary> /// <param name="html"></param> /// <returns></returns> public string Sanitize(string html) { var doc = new HtmlDocument(); doc.LoadHtml(html); SanitizeHtmlNode(doc.DocumentNode); //return doc.DocumentNode.WriteTo(); string output = null; // Use an XmlTextWriter to create self-closing tags using (StringWriter sw = new StringWriter()) { XmlWriter writer = new XmlTextWriter(sw); doc.DocumentNode.WriteTo(writer); output = sw.ToString(); // strip off XML doc header if (!string.IsNullOrEmpty(output)) { int at = output.IndexOf("?>"); output = output.Substring(at + 2); } writer.Close(); } doc = null; return output; } private void SanitizeHtmlNode(HtmlNode node) { if (node.NodeType == HtmlNodeType.Element) { // check for blacklist items and remove if (BlackList.Contains(node.Name)) { node.Remove(); return; } // remove CSS Expressions and embedded script links if (node.Name == "style") { if (string.IsNullOrEmpty(node.InnerText)) { if (node.InnerHtml.Contains("expression") || node.InnerHtml.Contains("javascript:")) node.ParentNode.RemoveChild(node); } } // remove script attributes if (node.HasAttributes) { for (int i = node.Attributes.Count - 1; i >= 0; i--) { HtmlAttribute currentAttribute = node.Attributes[i]; var attr = currentAttribute.Name.ToLower(); var val = currentAttribute.Value.ToLower(); span style="background: white; color: green">// remove event handlers if (attr.StartsWith("on")) node.Attributes.Remove(currentAttribute); // remove script links else if ( //(attr == "href" || attr== "src" || attr == "dynsrc" || attr == "lowsrc") && val != null && val.Contains("javascript:")) node.Attributes.Remove(currentAttribute); // Remove CSS Expressions else if (attr == "style" && val != null && val.Contains("expression") || val.Contains("javascript:") || val.Contains("vbscript:")) node.Attributes.Remove(currentAttribute); } } } // Look through child nodes recursively if (node.HasChildNodes) { for (int i = node.ChildNodes.Count - 1; i >= 0; i--) { SanitizeHtmlNode(node.ChildNodes[i]); } } } } } Please note: Use this as a starting point only for your own parsing and review the code for your specific use case! If your needs are less lenient than mine were you can you can make this much stricter by not allowing src and href attributes or CSS links if your HTML doesn't allow it. You can also check links for external URLs and disallow those - lots of options.  The code is simple enough to make it easy to extend to fit your use cases more specifically. It's also quite easy to make this code work using a WhiteList approach if you want to go that route. The code above is semi-generic for allowing full featured HTML fragments that only disallow script related content. The Sanitize method walks through each node of the document and then recursively drills into all of its children until the entire document has been traversed. Note that the code here uses an XmlTextWriter to write output - this is done to preserve XHTML style self-closing tags which are otherwise left as non-self-closing tags. The sanitizer code scans for blacklist elements and removes those elements not allowed. Note that the blacklist is configurable either in the instance class as a property or in the static method via the string parameter list. Additionally the code goes through each element's attributes and looks for a host of rules gleaned from some of the XSS cheat sheets listed at the end of the post. Clearly there are a lot more XSS vulnerabilities, but a lot of them apply to ancient browsers (IE6 and versions of Netscape) - many of these glaring holes (like CSS expressions - WTF IE?) have been removed in modern browsers. What a Pain To be honest this is NOT a piece of code that I wanted to write. I think building anything related to XSS is better left to people who have far more knowledge of the topic than I do. Unfortunately, I was unable to find a tool that worked even closely for me, or even provided a working base. For the project I was working on I had no choice and I'm sharing the code here merely as a base line to start with and potentially expand on for specific needs. It's sad that Microsoft Web Protection Library is currently such a train wreck - this is really something that should come from Microsoft as the systems vendor or possibly a third party that provides security tools. Luckily for my application we are dealing with a authenticated and validated users so the user base is fairly well known, and relatively small - this is not a wide open Internet application that's directly public facing. As I mentioned earlier in the post, if I had my way I would simply not allow this type of raw HTML input in the first place, and instead rely on a more controlled HTML input mechanism like MarkDown or even a good HTML Edit control that can provide some limits on what types of input are allowed. Alas in this case I was overridden and we had to go forward and allow *any* raw HTML posted. Sometimes I really feel sad that it's come this far - how many good applications and tools have been thwarted by fear of XSS (or worse) attacks? So many things that could be done *if* we had a more secure browser experience and didn't have to deal with every little script twerp trying to hack into Web pages and obscure browser bugs. So much time wasted building secure apps, so much time wasted by others trying to hack apps… We're a funny species - no other species manages to waste as much time, effort and resources as we humans do :-) Resources Code on GitHub Html Agility Pack XSS Cheat Sheet XSS Prevention Cheat Sheet Microsoft Web Protection Library (AntiXss) StackOverflow Links: http://stackoverflow.com/questions/341872/html-sanitizer-for-net http://blog.stackoverflow.com/2008/06/safe-html-and-xss/ http://code.google.com/p/subsonicforums/source/browse/trunk/SubSonic.Forums.Data/HtmlScrubber.cs?r=61© Rick Strahl, West Wind Technologies, 2005-2012Posted in Security  HTML  ASP.NET  JavaScript   Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

    Read the article

  • Passing parameters between Silverlight and ASP.NET – Part 1

    - by mohanbrij
    While working with Silverlight applications, we may face some scenarios where we may need to embed Silverlight as a component, like for e.g in Sharepoint Webpars or simple we can have the same with ASP.NET. The biggest challenge comes when we have to pass the parameters from ASP.NET to Silverlight components or back from Silverlight to ASP.NET. We have lots of ways we can do this, like using InitParams, QueryStrings, using HTML objects in Silverlight, etc. All these different techniques have some advantages or disadvantages or limitations. Lets see one by one why we should choose one and what are the ways to achieve the same. 1. InitParams: Lets start with InitParams, Start your Visual Studio 2010 IDE, and Create a Silverlight Application, give any name. Now go to the ASP.NET WebProject which is used to Host the Silverlight XAP component. You will find lots of different tags are used by Silverlight object as <params> tags. To use InitParams, Silverlight provides us with a tag called InitParams which we can use to pass parameters to Silverlight object from ASP.NET. 1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> 2: <param name="source" value="ClientBin/SilverlightApp.xap"/> 3: <param name="onError" value="onSilverlightError" /> 4: <param name="background" value="white" /> 5: <param name="minRuntimeVersion" value="4.0.50826.0" /> 6: <param name="initparams" id="initParams" runat="server" value=""/> 7: <param name="autoUpgrade" value="true" /> 8: <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none"> 9: <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> 10: </a> 11: </object> Here in the code above I have included a initParam as a param tag (line 6), now in the page load I will add a line 1: initParams.Attributes.Add("value", "key1=Brij, key2=Mohan"); This basically add a value parameter inside the initParam. So thats all we need in our ASP.NET side, now coming to the Silverlight Code open the code behind of App.xaml and add the following lines of code. 1: private string firstKey, secondKey; 2: private void Application_Startup(object sender, StartupEventArgs e) 3: { 4: if (e.InitParams.ContainsKey("key1")) 5: this.firstKey = e.InitParams["key1"]; 6: if (e.InitParams.ContainsKey("key2")) 7: this.secondKey = e.InitParams["key2"]; 8: this.RootVisual = new MainPage(firstKey, secondKey); 9: } This code fetch the init params and pass it to our MainPage.xaml constructor, in the MainPage.xaml we can use these variables according to our requirement, here in this example I am simply displaying the variables in a Message Box. 1: public MainPage(string param1, string param2) 2: { 3: InitializeComponent(); 4: MessageBox.Show("Welcome, " + param1 + " " + param2); 5: } This will give you a sample output as Limitations: Depending on the browsers you have some limitation on the overall string length of the parameters you can pass. To get more details on this limitation, you can refer to this link :http://www.boutell.com/newfaq/misc/urllength.html 2. QueryStrings To show this example I am taking the scenario where we have a default.aspx page and we are going to the SIlverlightTestPage.aspx, and we have to work with the parameters which was passed by default.aspx in the SilverlightTestPage.aspx Silverlight Component. So first I will add a new page in my application which contains a button with ID =btnNext, and on click of the button I will redirect my page to my SilverlightTestAppPage.aspx with the required query strings. Code of Default.aspx 1: protected void btnNext_Click(object sender, EventArgs e) 2: { 3: Response.Redirect("~/SilverlightAppTestPage.aspx?FName=Brij" + "&LName=Mohan"); 4: } Code of MainPage.xaml.cs 1: public partial class MainPage : UserControl 2: { 3: public MainPage() 4: { 5: InitializeComponent(); 6: this.Loaded += new RoutedEventHandler(MainPage_Loaded); 7: } 8: 9: void MainPage_Loaded(object sender, RoutedEventArgs e) 10: { 11: IDictionary<string, string> qString = HtmlPage.Document.QueryString; 12: string firstName = string.Empty; 13: string lastName = string.Empty; 14: foreach (KeyValuePair<string, string> keyValuePair in qString) 15: { 16: string key = keyValuePair.Key; 17: string value = keyValuePair.Value; 18: if (key == "FName") 19: firstName = value; 20: else if (key == "LName") 21: lastName = value; 22: } 23: MessageBox.Show("Welcome, " + firstName + " " + lastName); 24: } 25: } Set the Startup page as Default.aspx, now run the application. This will give you the following output: Since here also you are using the Query Strings to pass your parameters, so you are depending on the browser capabilities of the length of the query strings it can pass. Here also you can refer the limitation which I have mentioned in my previous example for the length of parameters you can use.   3. Using HtmlPage.Document Silverlight to ASP.NET <—> ASP.NET to Silverlight: To show this I setup a sample Silverlight Application with Buttons Get Data and Set Data with the Data Text Box. In ASP.NET page I kep a TextBox to Show how the values passed to and From Silverlight to ASP.NET reflects back. My page with Silverlight control looks like this. When I Say Get Data it pulls the data from ASP.NET to Silverlight Control Text Box, and When I say Set data it basically Set the Value from Silverlight Control TextBox to ASP.NET TextBox. Now let see the code how it is doing. This is my ASP.NET Source Code. Here I have just created a TextBox named : txtData 1: <body> 2: <form id="form1" runat="server" style="height:100%"> 3: <div id="silverlightControlHost"> 4: ASP.NET TextBox: <input type="text" runat="server" id="txtData" value="Some Data" /> 5: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> 6: <param name="source" value="ClientBin/SilverlightApplication1.xap"/> 7: <param name="onError" value="onSilverlightError" /> 8: <param name="background" value="white" /> 9: <param name="minRuntimeVersion" value="4.0.50826.0" /> 10: <param name="autoUpgrade" value="true" /> 11: <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none"> 12: <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> 13: </a> 14: </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe> 15: </div> 16: </form> 17: </body> My actual logic for getting and setting the data lies in my Silverlight Control, this is my XAML code with TextBox and Buttons. 1: <Grid x:Name="LayoutRoot" Background="White" Height="100" Width="450" VerticalAlignment="Top"> 2: <Grid.ColumnDefinitions> 3: <ColumnDefinition Width="110" /> 4: <ColumnDefinition Width="110" /> 5: <ColumnDefinition Width="110" /> 6: <ColumnDefinition Width="110" /> 7: </Grid.ColumnDefinitions> 8: <TextBlock Text="Silverlight Text Box: " Grid.Column="0" VerticalAlignment="Center"></TextBlock> 9: <TextBox x:Name="DataText" Width="100" Grid.Column="1" Height="20"></TextBox> 10: <Button x:Name="GetData" Width="100" Click="GetData_Click" Grid.Column="2" Height="30" Content="Get Data"></Button> 11: <Button x:Name="SetData" Width="100" Click="SetData_Click" Grid.Column="3" Height="30" Content="Set Data"></Button> 12: </Grid> Now we have to write few lines of Button Events for Get Data and Set Data which basically make use of Windows.System.Browser namespace. 1: private void GetData_Click(object sender, RoutedEventArgs e) 2: { 3: DataText.Text = HtmlPage.Document.GetElementById("txtData").GetProperty("value").ToString(); 4: } 5:  6: private void SetData_Click(object sender, RoutedEventArgs e) 7: { 8: HtmlPage.Document.GetElementById("txtData").SetProperty("value", DataText.Text); 9: } That’s it so when we run this application my Form will look like this. 4. Using Object Serialization. This is a useful when we want to pass Objects of Data from our ASP.NET application to Silverlight Controls and back. This technique basically uses the above technique I mentioned in Pint 3 above. Since this itself is a length topic so details of this I am going to cover in Part 2 of this Post with Sample Code Example very soon.

    Read the article

  • Coding With Windows Azure IaaS

    - by Hisham El-bereky
    This post will focus on some advanced programming topics concerned with IaaS (Infrastructure as a Service) which provided as windows azure virtual machine (with its related resources like virtual disk and virtual network), you know that windows azure started as PaaS cloud platform but regarding to some business cases which need to have full control over their virtual machine, so windows azure directed toward providing IaaS. Sometimes you will need to manage your cloud IaaS through code may be for these reasons: Working on hyper-cloud system by providing bursting connector to windows azure virtual machines Providing multi-tenant system which consume windows azure virtual machine Automated process on your on-premises or cloud service which need to utilize some virtual resources We are going to implement the following basic operation using C# code: List images Create virtual machine List virtual machines Restart virtual machine Delete virtual machine Before going to implement the above operations we need to prepare client side and windows azure subscription to communicate correctly by providing management certificate (x.509 v3 certificates) which permit client access to resources in your Windows Azure subscription, whilst requests made using the Windows Azure Service Management REST API require authentication against a certificate that you provide to Windows Azure More info about setting management certificate located here. And to install .cer on other client machine you will need the .pfx file, or if not exist by exporting .cer as .pfx Note: You will need to install .net 4.5 on your machine to try the code So let start This post built on the post sent by Michael Washam "Advanced Windows Azure IaaS – Demo Code", so I'm here to declare some points and to add new operation which is not exist in Michael's demo The basic C# class object used here as client to azure REST API for IaaS service is HttpClient (Provides a base class for sending HTTP requests and receiving HTTP responses from a resource identified by a URI) this object must be initialized with the required data like certificate, headers and content if required. Also I'd like to refer here that the code is based on using Asynchronous programming with calls to azure which enhance the performance and gives us the ability to work with complex calls which depends on more than one sub-call to achieve some operation The following code explain how to get certificate and initializing HttpClient object with required data like headers and content HttpClient GetHttpClient() { X509Store certificateStore = null; X509Certificate2 certificate = null; try { certificateStore = new X509Store(StoreName.My, StoreLocation.CurrentUser); certificateStore.Open(OpenFlags.ReadOnly); string thumbprint = ConfigurationManager.AppSettings["CertThumbprint"]; var certificates = certificateStore.Certificates.Find(X509FindType.FindByThumbprint, thumbprint, false); if (certificates.Count > 0) { certificate = certificates[0]; } } finally { if (certificateStore != null) certificateStore.Close(); }   WebRequestHandler handler = new WebRequestHandler(); if (certificate!= null) { handler.ClientCertificates.Add(certificate); HttpClient httpClient = new HttpClient(handler); //And to set required headers lik x-ms-version httpClient.DefaultRequestHeaders.Add("x-ms-version", "2012-03-01"); httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/xml")); return httpClient; } return null; }  Let us keep the object httpClient as reference object used to call windows azure REST API IaaS service. For each request operation we need to define: Request URI HTTP Method Headers Content body (1) List images The List OS Images operation retrieves a list of the OS images from the image repository Request URI https://management.core.windows.net/<subscription-id>/services/images] Replace <subscription-id> with your windows Id HTTP Method GET (HTTP 1.1) Headers x-ms-version: 2012-03-01 Body None.  C# Code List<String> imageList = new List<String>(); //replace _subscriptionid with your WA subscription String uri = String.Format("https://management.core.windows.net/{0}/services/images", _subscriptionid);  HttpClient http = GetHttpClient(); Stream responseStream = await http.GetStreamAsync(uri);  if (responseStream != null) {      XDocument xml = XDocument.Load(responseStream);      var images = xml.Root.Descendants(ns + "OSImage").Where(i => i.Element(ns + "OS").Value == "Windows");      foreach (var image in images)      {      string img = image.Element(ns + "Name").Value;      imageList.Add(img);      } } More information about the REST call (Request/Response) located here on this link http://msdn.microsoft.com/en-us/library/windowsazure/jj157191.aspx (2) Create Virtual Machine Creating virtual machine required service and deployment to be created first, so creating VM should be done through three steps incase hosted service and deployment is not created yet Create hosted service, a container for service deployments in Windows Azure. A subscription may have zero or more hosted services Create deployment, a service that is running on Windows Azure. A deployment may be running in either the staging or production deployment environment. It may be managed either by referencing its deployment ID, or by referencing the deployment environment in which it's running. Create virtual machine, the previous two steps info required here in this step I suggest here to use the same name for service, deployment and service to make it easy to manage virtual machines Note: A name for the hosted service that is unique within Windows Azure. This name is the DNS prefix name and can be used to access the hosted service. For example: http://ServiceName.cloudapp.net// 2.1 Create service Request URI https://management.core.windows.net/<subscription-id>/services/hostedservices HTTP Method POST (HTTP 1.1) Header x-ms-version: 2012-03-01 Content-Type: application/xml Body More details about request body (and other information) are located here http://msdn.microsoft.com/en-us/library/windowsazure/gg441304.aspx C# code The following method show how to create hosted service async public Task<String> NewAzureCloudService(String ServiceName, String Location, String AffinityGroup, String subscriptionid) { String requestID = String.Empty;   String uri = String.Format("https://management.core.windows.net/{0}/services/hostedservices", subscriptionid); HttpClient http = GetHttpClient();   System.Text.ASCIIEncoding ae = new System.Text.ASCIIEncoding(); byte[] svcNameBytes = ae.GetBytes(ServiceName);   String locationEl = String.Empty; String locationVal = String.Empty;   if (String.IsNullOrEmpty(Location) == false) { locationEl = "Location"; locationVal = Location; } else { locationEl = "AffinityGroup"; locationVal = AffinityGroup; }   XElement srcTree = new XElement("CreateHostedService", new XAttribute(XNamespace.Xmlns + "i", ns1), new XElement("ServiceName", ServiceName), new XElement("Label", Convert.ToBase64String(svcNameBytes)), new XElement(locationEl, locationVal) ); ApplyNamespace(srcTree, ns);   XDocument CSXML = new XDocument(srcTree); HttpContent content = new StringContent(CSXML.ToString()); content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/xml");   HttpResponseMessage responseMsg = await http.PostAsync(uri, content); if (responseMsg != null) { requestID = responseMsg.Headers.GetValues("x-ms-request-id").FirstOrDefault(); } return requestID; } 2.2 Create Deployment Request URI https://management.core.windows.net/<subscription-id>/services/hostedservices/<service-name>/deploymentslots/<deployment-slot-name> <deployment-slot-name> with staging or production, depending on where you wish to deploy your service package <service-name> provided as input from the previous step HTTP Method POST (HTTP 1.1) Header x-ms-version: 2012-03-01 Content-Type: application/xml Body More details about request body (and other information) are located here http://msdn.microsoft.com/en-us/library/windowsazure/ee460813.aspx C# code The following method show how to create hosted service deployment async public Task<String> NewAzureVMDeployment(String ServiceName, String VMName, String VNETName, XDocument VMXML, XDocument DNSXML) { String requestID = String.Empty;     String uri = String.Format("https://management.core.windows.net/{0}/services/hostedservices/{1}/deployments", _subscriptionid, ServiceName); HttpClient http = GetHttpClient(); XElement srcTree = new XElement("Deployment", new XAttribute(XNamespace.Xmlns + "i", ns1), new XElement("Name", ServiceName), new XElement("DeploymentSlot", "Production"), new XElement("Label", ServiceName), new XElement("RoleList", null) );   if (String.IsNullOrEmpty(VNETName) == false) { srcTree.Add(new XElement("VirtualNetworkName", VNETName)); }   if(DNSXML != null) { srcTree.Add(new XElement("DNS", new XElement("DNSServers", DNSXML))); }   XDocument deploymentXML = new XDocument(srcTree); ApplyNamespace(srcTree, ns);   deploymentXML.Descendants(ns + "RoleList").FirstOrDefault().Add(VMXML.Root);     String fixedXML = deploymentXML.ToString().Replace(" xmlns=\"\"", ""); HttpContent content = new StringContent(fixedXML); content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/xml");   HttpResponseMessage responseMsg = await http.PostAsync(uri, content); if (responseMsg != null) { requestID = responseMsg.Headers.GetValues("x-ms-request-id").FirstOrDefault(); }   return requestID; } 2.3 Create Virtual Machine Request URI https://management.core.windows.net/<subscription-id>/services/hostedservices/<cloudservice-name>/deployments/<deployment-name>/roles <cloudservice-name> and <deployment-name> are provided as input from the previous steps Http Method POST (HTTP 1.1) Header x-ms-version: 2012-03-01 Content-Type: application/xml Body More details about request body (and other information) located here http://msdn.microsoft.com/en-us/library/windowsazure/jj157186.aspx C# code async public Task<String> NewAzureVM(String ServiceName, String VMName, XDocument VMXML) { String requestID = String.Empty;   String deployment = await GetAzureDeploymentName(ServiceName);   String uri = String.Format("https://management.core.windows.net/{0}/services/hostedservices/{1}/deployments/{2}/roles", _subscriptionid, ServiceName, deployment);   HttpClient http = GetHttpClient(); HttpContent content = new StringContent(VMXML.ToString()); content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/xml"); HttpResponseMessage responseMsg = await http.PostAsync(uri, content); if (responseMsg != null) { requestID = responseMsg.Headers.GetValues("x-ms-request-id").FirstOrDefault(); } return requestID; } (3) List Virtual Machines To list virtual machine hosted on windows azure subscription we have to loop over all hosted services to get its hosted virtual machines To do that we need to execute the following operations: listing hosted services listing hosted service Virtual machine 3.1 Listing Hosted Services Request URI https://management.core.windows.net/<subscription-id>/services/hostedservices HTTP Method GET (HTTP 1.1) Headers x-ms-version: 2012-03-01 Body None. More info about this HTTP request located here on this link http://msdn.microsoft.com/en-us/library/windowsazure/ee460781.aspx C# Code async private Task<List<XDocument>> GetAzureServices(String subscriptionid) { String uri = String.Format("https://management.core.windows.net/{0}/services/hostedservices ", subscriptionid); List<XDocument> services = new List<XDocument>();   HttpClient http = GetHttpClient();   Stream responseStream = await http.GetStreamAsync(uri);   if (responseStream != null) { XDocument xml = XDocument.Load(responseStream); var svcs = xml.Root.Descendants(ns + "HostedService"); foreach (XElement r in svcs) { XDocument vm = new XDocument(r); services.Add(vm); } }   return services; }  3.2 Listing Hosted Service Virtual Machines Request URI https://management.core.windows.net/<subscription-id>/services/hostedservices/<service-name>/deployments/<deployment-name>/roles/<role-name> HTTP Method GET (HTTP 1.1) Headers x-ms-version: 2012-03-01 Body None. More info about this HTTP request here http://msdn.microsoft.com/en-us/library/windowsazure/jj157193.aspx C# Code async public Task<XDocument> GetAzureVM(String ServiceName, String VMName, String subscriptionid) { String deployment = await GetAzureDeploymentName(ServiceName); XDocument vmXML = new XDocument();   String uri = String.Format("https://management.core.windows.net/{0}/services/hostedservices/{1}/deployments/{2}/roles/{3}", subscriptionid, ServiceName, deployment, VMName);   HttpClient http = GetHttpClient(); Stream responseStream = await http.GetStreamAsync(uri); if (responseStream != null) { vmXML = XDocument.Load(responseStream); }   return vmXML; }  So the final method which can be used to list all virtual machines is: async public Task<XDocument> GetAzureVMs() { List<XDocument> services = await GetAzureServices(); XDocument vms = new XDocument(); vms.Add(new XElement("VirtualMachines")); ApplyNamespace(vms.Root, ns); foreach (var svc in services) { string ServiceName = svc.Root.Element(ns + "ServiceName").Value;   String uri = String.Format("https://management.core.windows.net/{0}/services/hostedservices/{1}/deploymentslots/{2}", _subscriptionid, ServiceName, "Production");   try { HttpClient http = GetHttpClient(); Stream responseStream = await http.GetStreamAsync(uri);   if (responseStream != null) { XDocument xml = XDocument.Load(responseStream); var roles = xml.Root.Descendants(ns + "RoleInstance"); foreach (XElement r in roles) { XElement svcnameel = new XElement("ServiceName", ServiceName); ApplyNamespace(svcnameel, ns); r.Add(svcnameel); // not part of the roleinstance vms.Root.Add(r); } } } catch (HttpRequestException http) { // no vms with cloud service } } return vms; }  (4) Restart Virtual Machine Request URI https://management.core.windows.net/<subscription-id>/services/hostedservices/<service-name>/deployments/<deployment-name>/roles/<role-name>/Operations HTTP Method POST (HTTP 1.1) Headers x-ms-version: 2012-03-01 Content-Type: application/xml Body <RestartRoleOperation xmlns:i="http://www.w3.org/2001/XMLSchema-instance"> <OperationType>RestartRoleOperation</OperationType> </RestartRoleOperation>  More details about this http request here http://msdn.microsoft.com/en-us/library/windowsazure/jj157197.aspx  C# Code async public Task<String> RebootVM(String ServiceName, String RoleName) { String requestID = String.Empty;   String deployment = await GetAzureDeploymentName(ServiceName); String uri = String.Format("https://management.core.windows.net/{0}/services/hostedservices/{1}/deployments/{2}/roleInstances/{3}/Operations", _subscriptionid, ServiceName, deployment, RoleName);   HttpClient http = GetHttpClient();   XElement srcTree = new XElement("RestartRoleOperation", new XAttribute(XNamespace.Xmlns + "i", ns1), new XElement("OperationType", "RestartRoleOperation") ); ApplyNamespace(srcTree, ns);   XDocument CSXML = new XDocument(srcTree); HttpContent content = new StringContent(CSXML.ToString()); content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/xml");   HttpResponseMessage responseMsg = await http.PostAsync(uri, content); if (responseMsg != null) { requestID = responseMsg.Headers.GetValues("x-ms-request-id").FirstOrDefault(); } return requestID; }  (5) Delete Virtual Machine You can delete your hosted virtual machine by deleting its deployment, but I prefer to delete its hosted service also, so you can easily manage your virtual machines from code 5.1 Delete Deployment Request URI https://management.core.windows.net/< subscription-id >/services/hostedservices/< service-name >/deployments/<Deployment-Name> HTTP Method DELETE (HTTP 1.1) Headers x-ms-version: 2012-03-01 Body None. C# code async public Task<HttpResponseMessage> DeleteDeployment( string deploymentName) { string xml = string.Empty; String uri = String.Format("https://management.core.windows.net/{0}/services/hostedservices/{1}/deployments/{2}", _subscriptionid, deploymentName, deploymentName); HttpClient http = GetHttpClient(); HttpResponseMessage responseMessage = await http.DeleteAsync(uri); return responseMessage; }  5.2 Delete Hosted Service Request URI https://management.core.windows.net/<subscription-id>/services/hostedservices/<service-name> HTTP Method DELETE (HTTP 1.1) Headers x-ms-version: 2012-03-01 Body None. C# code async public Task<HttpResponseMessage> DeleteService(string serviceName) { string xml = string.Empty; String uri = String.Format("https://management.core.windows.net/{0}/services/hostedservices/{1}", _subscriptionid, serviceName); Log.Info("Windows Azure URI (http DELETE verb): " + uri, typeof(VMManager)); HttpClient http = GetHttpClient(); HttpResponseMessage responseMessage = await http.DeleteAsync(uri); return responseMessage; }  And the following is the method which can used to delete both of deployment and service async public Task<string> DeleteVM(string vmName) { string responseString = string.Empty;   // as a convention here in this post, a unified name used for service, deployment and VM instance to make it easy to manage VMs HttpClient http = GetHttpClient(); HttpResponseMessage responseMessage = await DeleteDeployment(vmName);   if (responseMessage != null) {   string requestID = responseMessage.Headers.GetValues("x-ms-request-id").FirstOrDefault(); OperationResult result = await PollGetOperationStatus(requestID, 5, 120); if (result.Status == OperationStatus.Succeeded) { responseString = result.Message; HttpResponseMessage sResponseMessage = await DeleteService(vmName); if (sResponseMessage != null) { OperationResult sResult = await PollGetOperationStatus(requestID, 5, 120); responseString += sResult.Message; } } else { responseString = result.Message; } } return responseString; }  Note: This article is subject to be updated Hisham  References Advanced Windows Azure IaaS – Demo Code Windows Azure Service Management REST API Reference Introduction to the Azure Platform Representational state transfer Asynchronous Programming with Async and Await (C# and Visual Basic) HttpClient Class

    Read the article

  • Metro: Understanding CSS Media Queries

    - by Stephen.Walther
    If you are building a Metro style application then your application needs to look great when used on a wide variety of devices. Your application needs to work on tiny little phones, slates, desktop monitors, and the super high resolution displays of the future. Your application also must support portable devices used with different orientations. If someone tilts their phone from portrait to landscape mode then your application must still be usable. Finally, your Metro style application must look great in different states. For example, your Metro application can be in a “snapped state” when it is shrunk so it can share screen real estate with another application. In this blog post, you learn how to use Cascading Style Sheet media queries to support different devices, different device orientations, and different application states. First, you are provided with an overview of the W3C Media Query recommendation and you learn how to detect standard media features. Next, you learn about the Microsoft extensions to media queries which are supported in Metro style applications. For example, you learn how to use the –ms-view-state feature to detect whether an application is in a “snapped state” or “fill state”. Finally, you learn how to programmatically detect the features of a device and the state of an application. You learn how to use the msMatchMedia() method to execute a media query with JavaScript. Using CSS Media Queries Media queries enable you to apply different styles depending on the features of a device. Media queries are not only supported by Metro style applications, most modern web browsers now support media queries including Google Chrome 4+, Mozilla Firefox 3.5+, Apple Safari 4+, and Microsoft Internet Explorer 9+. Loading Different Style Sheets with Media Queries Imagine, for example, that you want to display different content depending on the horizontal resolution of a device. In that case, you can load different style sheets optimized for different sized devices. Consider the following HTML page: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>U.S. Robotics and Mechanical Men</title> <link href="main.css" rel="stylesheet" type="text/css" /> <!-- Less than 1100px --> <link href="medium.css" rel="stylesheet" type="text/css" media="(max-width:1100px)" /> <!-- Less than 800px --> <link href="small.css" rel="stylesheet" type="text/css" media="(max-width:800px)" /> </head> <body> <div id="header"> <h1>U.S. Robotics and Mechanical Men</h1> </div> <!-- Advertisement Column --> <div id="leftColumn"> <img src="advertisement1.gif" alt="advertisement" /> <img src="advertisement2.jpg" alt="advertisement" /> </div> <!-- Product Search Form --> <div id="mainContentColumn"> <label>Search Products</label> <input id="search" /><button>Search</button> </div> <!-- Deal of the Day Column --> <div id="rightColumn"> <h1>Deal of the Day!</h1> <p> Buy two cameras and get a third camera for free! Offer is good for today only. </p> </div> </body> </html> The HTML page above contains three columns: a leftColumn, mainContentColumn, and rightColumn. When the page is displayed on a low resolution device, such as a phone, only the mainContentColumn appears: When the page is displayed in a medium resolution device, such as a slate, both the leftColumn and the mainContentColumns are displayed: Finally, when the page is displayed in a high-resolution device, such as a computer monitor, all three columns are displayed: Different content is displayed with the help of media queries. The page above contains three style sheet links. Two of the style links include a media attribute: <link href="main.css" rel="stylesheet" type="text/css" /> <!-- Less than 1100px --> <link href="medium.css" rel="stylesheet" type="text/css" media="(max-width:1100px)" /> <!-- Less than 800px --> <link href="small.css" rel="stylesheet" type="text/css" media="(max-width:800px)" /> The main.css style sheet contains default styles for the elements in the page. The medium.css style sheet is applied when the page width is less than 1100px. This style sheet hides the rightColumn and changes the page background color to lime: html { background-color: lime; } #rightColumn { display:none; } Finally, the small.css style sheet is loaded when the page width is less than 800px. This style sheet hides the leftColumn and changes the page background color to red: html { background-color: red; } #leftColumn { display:none; } The different style sheets are applied as you stretch and contract your browser window. You don’t need to refresh the page after changing the size of the page for a media query to be applied: Using the @media Rule You don’t need to divide your styles into separate files to take advantage of media queries. You can group styles by using the @media rule. For example, the following HTML page contains one set of styles which are applied when a device’s orientation is portrait and another set of styles when a device’s orientation is landscape: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Application1</title> <style type="text/css"> html { font-family:'Segoe UI Semilight'; font-size: xx-large; } @media screen and (orientation:landscape) { html { background-color: lime; } p.content { width: 50%; margin: auto; } } @media screen and (orientation:portrait) { html { background-color: red; } p.content { width: 90%; margin: auto; } } </style> </head> <body> <p class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> </body> </html> When a device has a landscape orientation then the background color is set to the color lime and the text only takes up 50% of the available horizontal space: When the device has a portrait orientation then the background color is red and the text takes up 90% of the available horizontal space: Using Standard CSS Media Features The official list of standard media features is contained in the W3C CSS Media Query recommendation located here: http://www.w3.org/TR/css3-mediaqueries/ Here is the official list of the 13 media features described in the standard: · width – The current width of the viewport · height – The current height of the viewport · device-width – The width of the device · device-height – The height of the device · orientation – The value portrait or landscape · aspect-ratio – The ratio of width to height · device-aspect-ratio – The ratio of device width to device height · color – The number of bits per color supported by the device · color-index – The number of colors in the color lookup table of the device · monochrome – The number of bits in the monochrome frame buffer · resolution – The density of the pixels supported by the device · scan – The values progressive or interlace (used for TVs) · grid – The values 0 or 1 which indicate whether the device supports a grid or a bitmap Many of the media features in the list above support the min- and max- prefix. For example, you can test for the min-width using a query like this: (min-width:800px) You can use the logical and operator with media queries when you need to check whether a device supports more than one feature. For example, the following query returns true only when the width of the device is between 800 and 1,200 pixels: (min-width:800px) and (max-width:1200px) Finally, you can use the different media types – all, braille, embossed, handheld, print, projection, screen, speech, tty, tv — with a media query. For example, the following media query only applies to a page when a page is being printed in color: print and (color) If you don’t specify a media type then media type all is assumed. Using Metro Style Media Features Microsoft has extended the standard list of media features which you can include in a media query with two custom media features: · -ms-high-contrast – The values any, black-white, white-black · -ms-view-state – The values full-screen, fill, snapped, device-portrait You can take advantage of the –ms-high-contrast media feature to make your web application more accessible to individuals with disabilities. In high contrast mode, you should make your application easier to use for individuals with vision disabilities. The –ms-view-state media feature enables you to detect the state of an application. For example, when an application is snapped, the application only occupies part of the available screen real estate. The snapped application appears on the left or right side of the screen and the rest of the screen real estate is dominated by the fill application (Metro style applications can only be snapped on devices with a horizontal resolution of greater than 1,366 pixels). Here is a page which contains style rules for an application in both a snap and fill application state: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>MyWinWebApp</title> <style type="text/css"> html { font-family:'Segoe UI Semilight'; font-size: xx-large; } @media screen and (-ms-view-state:snapped) { html { background-color: lime; } } @media screen and (-ms-view-state:fill) { html { background-color: red; } } </style> </head> <body> <p class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> </body> </html> When the application is snapped, the application appears with a lime background color: When the application state is fill then the background color changes to red: When the application takes up the entire screen real estate – it is not in snapped or fill state – then no special style rules apply and the application appears with a white background color. Querying Media Features with JavaScript You can perform media queries using JavaScript by taking advantage of the window.msMatchMedia() method. This method returns a MSMediaQueryList which has a matches method that represents success or failure. For example, the following code checks whether the current device is in portrait mode: if (window.msMatchMedia("(orientation:portrait)").matches) { console.log("portrait"); } else { console.log("landscape"); } If the matches property returns true, then the device is in portrait mode and the message “portrait” is written to the Visual Studio JavaScript Console window. Otherwise, the message “landscape” is written to the JavaScript Console window. You can create an event listener which triggers code whenever the results of a media query changes. For example, the following code writes a message to the JavaScript Console whenever the current device is switched into or out of Portrait mode: window.msMatchMedia("(orientation:portrait)").addListener(function (mql) { if (mql.matches) { console.log("Switched to portrait"); } }); Be aware that the event listener is triggered whenever the result of the media query changes. So the event listener is triggered both when you switch from landscape to portrait and when you switch from portrait to landscape. For this reason, you need to verify that the matches property has the value true before writing the message. Summary The goal of this blog entry was to explain how CSS media queries work in the context of a Metro style application written with JavaScript. First, you were provided with an overview of the W3C CSS Media Query recommendation. You learned about the standard media features which you can query such as width and orientation. Next, we focused on the Microsoft extensions to media queries. You learned how to use –ms-view-state to detect whether a Metro style application is in “snapped” or “fill” state. You also learned how to use the msMatchMedia() method to perform a media query from JavaScript.

    Read the article

  • Call a function in an ExtJS XTemplate

    - by Snowright
    I'm familiar with using a function to determine a specific condition using xtemplate but not sure how to directly call a function without the conditional if statement. My code, for example, wants to append some characters to a string that I am using within my xtemplate. I think the best way to do it is append the characters when the xtemplate is rendered. var myTpl = new Ext.XTemplate( '<tpl for=".">', '<tpl if="this.isThumbnailed(thumbnailed) == true">', '<img src=this.getThumbUrl(rawThumbUrl)/>', //this call to function does not work, also tried variations of this. '</tpl>', '</tpl>', { isThumbnailed : function(thumbnailed) { return ...; }, getThumbUrl : function(rawThumbUrl) { //... //this function does not get called. return ...; } } )

    Read the article

  • How to convert a Mat variable type in an IplImage variable type in OpenCV 2.0 ?

    - by user290613
    Hi all, I am trying to rotate an image in OpenCV. I've used this code that I found here on StackOverflow Mat source(img); Point2f src_center(source.cols/2.0, source.rows/2.0); Mat rot_mat = getRotationMatrix2D(src_center, 40.0, 1.0); Mat dst; warpAffine(source, dst, rot_mat, source.size()); Once I have my dst Mat variable type filled up I would like to put it back to an IplImage variable type, any idea about how to do this ? Thank you,

    Read the article

  • Jquery Datepicker with XML file

    - by matt
    an extension of my last question, http://stackoverflow.com/questions/2562986/getdate-with-jquery-datepicker , I am trying to use the jquery datepicker to load specific info from xml file dependent on the date selected by the user. Similar code but i am trying to load and parse an xml file to read contents of the file for the particular date. In a perfect world the user would tap a date and below the datepicker html output would give the user specific times for the selected date instead of my last project of an image. my probelm is nothing is loading, so my question is what am i doing wrong? my code is as follows <!DOCTYPE html> <link type="text/css" href="css/ui-darkness/jquery-ui-1.8.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Datepicker $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd', inline: true, minDate: new Date(2010, 1 - 1, 1), maxDate:new Date(2010, 12 - 1, 31), altField: '#datepicker_value', onSelect: function(){ var day1 = $("#datepicker").datepicker('getDate').getDate(); var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1; var year1 = $("#datepicker").datepicker('getDate').getFullYear(); var fullDate = year1 + "" + month1 + "" + day1; //var str_output ="<img src=\"http://69.89.20.27/images/a" + fullDate +".png\" width=\"100%\"/>"; //"<h1>"+fullDate+"</h1>"; //"<img src=\"http://69.*.*.*/images/a" + fullDate +".png\"/>"; //$('#page_output').html(str_output); var doc = loadXMLDoc('date.xml'); // loading the XML file var el = doc.getElementsByTagName('_'+date); // retrieving the elements corrsponding to a date, eg: _20100103 var page_output = document.getElementById('page_output'); if(el.length >= 1) { // matched XML data found for the specified date var dt = el[0].getElementsByTagName('date'); var great_times = el[0].getElementsByTagName('great_times'); var good_times = el[0].getElementsByTagName('good_times'); var str_output = "<h1><center>" + dt[0].childNodes[0].nodeValue + "</center></h1><br/><br>"; str_output += "<b>Excellent Times:</b><br> " + great_times[0].childNodes[0].nodeValue + "<br/><br>"; str_output += "<b>Good Times:</b><br> " + good_times[0].childNodes[0].nodeValue + "<br/><br>"; $('#page_output').html(str_output);// writing the results to the div element (page_out) } else { alert("Sorry","Action not allowed on this page"); page_output.innerHTML = ''; // No XML data found for the selected date reloadmainwDate(); return false; } return true; } }); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); //var img_date = .datepicker('getDate'); //var day1 = $("#datepicker").datepicker('getDate').getDate(); //var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1; //var year1 = $("#datepicker").datepicker('getDate').getFullYear(); //var fullDate = year1 + "-" + month1 + "-" + day1; //var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }); //var str_output = "<h1><center><p>"+ date + "</p></center></h1>"; //$('#page_output')[0].innerHTML = str_output; // writing the results to the div element (page_out) </script> <script> function loadXMLDoc(dname) { var xmlDoc; // IE 5 and IE 6 if(typeof ActiveXObject != 'undefined') { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.load(dname); return xmlDoc; } else if (window.XMLHttpRequest) // firefox { xmlDoc=new window.XMLHttpRequest(); xmlDoc.open("GET",dname,false); xmlDoc.send(""); return xmlDoc.responseXML; } alert("Error loading document"); return null; } <!-- Datepicker --> <div id="datepicker"></div> <!-- Highlight / Error --> <div id="page_output"></div> </body>

    Read the article

  • Mac Quick Look Preview in an NSView or NSImage?

    - by Niko Matsakis
    I am looking for a way (public or otherwise) to get an NSView, NSImage, CGImageRef, etc that shows the QuickLook preview for a file. Essentially the equivalent of QLThumbnailImageCreate() but for the preview. The public APIs I can find do not support this. They allow the creation of a thumbnail image or a QLPreviewPanel. The panel does in fact display the quick look preview, but I cannot get access to the preview's appearance to embed it in other views, nor can I display multiple previews at once. For background, I am writing an app where users can embed links to other files that should be displayed inline, kind of like an <img> tag in HTML. For images like JPGs and PDFs it's easy to figure out what to display. I thought that for other formats I would use Quick Look to generate a nice visual representation of the file's contents. This way the set of formats supported by my application would be easily extensible (just download new Quick Look generators).

    Read the article

< Previous Page | 105 106 107 108 109 110 111 112 113 114 115 116  | Next Page >